响应式WEB设计 BootStrap入门及自适应

ゝ一世哀愁。 2022-12-05 10:22 208阅读 0赞

响应式布局是什么？

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。  
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。简单来说就是做到屏幕自适应。

视口

视口在响应式设计中是一个非常重要的概念。视口的概念针对移动端浏览器，分为两种视口，一种是可见视口即设备大小，另一种是视窗视口即网页宽度。

在HTML5中，`<meta>`标签可以用于配置视口属性。

使用以下代码段进行配置mate标签的属性值

不同的属性值对应不同的含义，具体如下表所示

<table> 
 <thead> 
  <tr> 
   <th>属性与值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>user-scalable=no</td> 
   <td>用于设置用户是否可以缩放，默认为yes。</td> 
  </tr> 
  <tr> 
   <td>width=device-width</td> 
   <td>用于设置视窗视口的宽度，这里表示与可见视口宽度相同。</td> 
  </tr> 
  <tr> 
   <td>initial-scale=1.0</td> 
   <td>用于设置初始缩放比例，取值为0~10.0。</td> 
  </tr> 
  <tr> 
   <td>maximum-scale=1.0</td> 
   <td>用于设置最大缩放比例，取值为0~10.0。</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>属性设置视窗视口的高度，</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>设置最小缩放比例。</td> 
  </tr> 
 </tbody> 
</table>

媒体查询

在CSS3规范中，媒体查询可以根据视口宽度、设备方向等差异来改变页面的显示方式。媒体查询由媒体类型和条件表达式组成，示例代码如下所示：

@media screen and (max-width: 960px) { 
    	/*样式设置*/
    }

##### 百分比布局 #####

由于媒体查询只能针对某几个特定阶段的视口，在捕捉到下一个视口前，页面的布局是不会变化的，这样会影响页面的显示，同时也无法兼容日益增多的各种设备。所以，想要做出真正灵活的页面，还需要用百分比布局代替固定布局，并且使用媒体查询限制范围。

使用百分比进行设置，这样之后就可以做到网页的自适应：如下代码所示：在游览器的窗口大小改变之后div标签的背景颜色也会发生变化

<!DOCTYPE html>
    <html>
    	<head>
    		<meta name="viewport" content="user-scalable=no, width=device-width, 
    initial-scale=1.0, maximum-scale=1.0">
    		<title>视口 媒体查询</title>
    	</head>
    	<style type="text/css">
    		.box { 
    			width: 1200px;
    			height: 100px;
    			background-color: chartreuse;
    		}
    
    		@media screen and (max-width: 960px) { 
    			.box { 
    				background-color: red;
    			}
    		}
    
    		@media screen and (max-width: 600px) { 
    			.box { 
    				background-color: yellow;
    			}
    		}
    
    		@media screen and (max-width: 360px) { 
    			.box { 
    				background-color: blue;
    			}
    		}
    	</style>
    	<body>
    		<div class="box">
    
    		</div>
    	</body>
    </html>

响应式栅格系统

##### 栅格系统： #####

在网页制作中，栅格系统（又称网格系统）就是用固定的格子进行网页布局，是一种清晰、工整的设计风格。  
栅格系统最早是应用于印刷媒体上，后来被应用于网页布局中，而随着响应式设计的流行，栅格系统开始被赋予了新的意义。

##### 弹性盒布局 #####

display标签：display用于指定弹性盒的容器，其值可以为flex；如果为行内元素，值为inline-flex。

父容器的属性与其取值、

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>对应含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>flex-direction</td> 
   <td>row 、 row-reverse 、 column 、column-reverse</td> 
   <td>排列方向</td> 
  </tr> 
  <tr> 
   <td>flex-wrap</td> 
   <td>wrap 、nowarp、wrap-reverse</td> 
   <td>排列是否换行</td> 
  </tr> 
  <tr> 
   <td>flex-flow</td> 
   <td></td> 
   <td>前两者</td> 
  </tr> 
  <tr> 
   <td>justify-content</td> 
   <td>flex-start 、 flex-end 、center 、 space-between 、 space-around</td> 
   <td>在主轴的排列方式</td> 
  </tr> 
  <tr> 
   <td>align-items</td> 
   <td>flex-start 、 flex-end 、 center 、 baseline 、stretch</td> 
   <td>在交叉轴的对齐</td> 
  </tr> 
  <tr> 
   <td>align-content</td> 
   <td>flex-start 、flex-end 、 center 、 space-between 、 space-around 、stretch</td> 
   <td>多根轴线对齐方式</td> 
  </tr> 
 </tbody> 
</table>

子元素的属性与其取值、

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>order</td> 
   <td>数字</td> 
   <td>出现顺序</td> 
  </tr> 
  <tr> 
   <td>flex-grow</td> 
   <td>数字</td> 
   <td>项目的放大比例，默认为0</td> 
  </tr> 
  <tr> 
   <td>flex-shrink</td> 
   <td>数字</td> 
   <td>项目的缩小比例，默认为1</td> 
  </tr> 
  <tr> 
   <td>flex-basis</td> 
   <td>length、auto</td> 
   <td>子元素占据父元素的宽高，默认为auto</td> 
  </tr> 
  <tr> 
   <td>flex</td> 
   <td>0,1，auto</td> 
   <td>前三者</td> 
  </tr> 
  <tr> 
   <td>align-self</td> 
   <td>auto、flex-start 、flex-end 、 center 、 baseline 、stretch</td> 
   <td>允许子元素不同的对齐方式</td> 
  </tr> 
 </tbody> 
</table>