我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。

很多网页都是基于网格设计的，这说明网页是按列来布局的。

响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

为什么是12列呢，因为12可以被2、3、4、6整除，能2、3、4、6等分。

创建网格视图

CSS.css

* {
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } * { border: 1px solid red !important; } .row{ width:100%; display: flex; flex-wrap: wrap; text-align: center; } .col-1{ width:8.3%; } .col-2{ width:16.6%; } .col-3{ width:25%; padding: 0.5%; } .col-4{ width:33.33%; } .col-5{ width:41.66%; } .col-6{ width:50%; } .col-7{ width:58.33%; } .col-8{ width:66.66%; } .col-9{ width:75%; padding: 0.5%; } .col-10{ width:83.33%; } .col-11{ width:91.66%; } .col-12{ width:100%; }

Html.html

    
      
       
    
 
     
      6 Columns
     
 
     
      6 Columns
     
 
    
 
    
 
     
      3 Columns
     
 
     
      3 Columns
     
 
     
      3 Columns
     
 
     
      3 Columns
     
 
    
 
    
 
     
      4 Columns
     
 
     
      4 Columns
     
 
     
      4 Columns
     
 
    
   效果：

Viewport

viewport 是用户网页的可视区域。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

 

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

如果不加initial-scale=1.0,有的浏览器会在切换到横屏模式时，仍就保持之前的页面宽度，而且他们还会使内容只是进行缩放，而无法自动调整布局

 

媒体查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {

    body {

        background-color: lightblue;

    }

}

 

添加断点

之前我们使用行和列来制作网页，它是响应式的，但在小屏幕上并不能友好的展示。

媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点，不同的断点有不同的效果。

 

1.掉落列模型

html:

    
      
       
    
 
     
 
     
 
     
 
    
   css：

* {
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html,body{ margin: 0; padding: 0; } .row{ display: flex; flex-wrap: wrap; } div{ width: 100%; min-height: 150px; } .box-darkBlue{ background-color: darkblue; } .box-blue{ background-color: blue; } .box-green{ background-color: green; } @media only screen and (min-width: 500px){ .box-darkBlue{ width: 25%;} .box-blue{ width: 75%;} } @media only screen and (min-width: 850px){ .box-darkBlue,.box-green{ width: 25%; } .box-blue{ width: 50%; } }

2.大体流动模型

与掉落列模型非常相似，但更像网格系统。 html:

    
      
       
    
 
     
 
     
 
     
 
     
 
     
 
    
   css:

* {
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html,body{ margin: 0; padding: 0; } .row{ display: flex; flex-wrap: wrap; } div{ width: 100%; min-height: 150px; } .box-darkBlue{ background-color: darkblue; } .box-blue{ background-color: blue; } .box-green{ background-color: green; } .box-red{ background-color:red; } .box-orange{ background-color: orange; } @media only screen and (min-width: 500px) { .box-blue, .box-green { width: 50%; } } @media only screen and (min-width: 650px){ .box-darkBlue,.box-blue{ width: 50%; } .box-green,.box-red,.box-orange{ width: 33.333333%; } } @media only screen and (min-width: 850px){ .row{ width: 800px; margin-left: auto; margin-right: auto; } }

3.活动布局模型

活动布局应该是最灵活的响应式模型了，它的布局方式并不是单纯的重排到其他列的下列，我们可以利用css顺序属性。

html:

    
      
       
    
 
     
 
     
 
      
 
      
 
     
 
     
 
    
   css:

* {
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html,body{ margin: 0; padding: 0; } .row{ display: flex; flex-wrap: wrap; } div{ width: 100%; min-height: 150px; } .box-darkBlue{ background-color: darkblue; } .box-blue{ background-color: blue; } .box-green{ background-color: green; } .box-red{ background-color:red; } .box-orange{ background-color: orange; } @media only screen and (min-width: 500px) { .box-darkBlue{ width: 50%; } .row2{ width: 50%; } } @media only screen and (min-width: 850px){ .box-red{ width: 25%; order: -1; } .row2{ width: 50%; } .box-darkBlue{ width: 25%; order: 1; } }

 

4.画布溢出模型

在画布溢出模型中，内容并不是竖直堆放的，而是将不常用的内容，比如导航栏或者应用菜单，放在屏幕以外，只有当屏幕足够大的时候，才显示出来。 html:

 

* {
   -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } html,body,main{ padding: 0; margin: 0; height: 100%; width: 100%; } nav,main{ padding: 1em; } .dark-blue{ background-color: darkblue; } main{ background-color: lightblue; } a#menu svg{ width: 40px; fill: #000; } nav{ width: 300px; height: 100%; position: absolute; transform:translate(-300px.0); -webkit-transform: translate(-300px, 0); transition: transform 0.3s ease; } nav.open{ transform: translate(0,0); -webkit-transform: translate(0, 0); } /* 如果有足够的空间(>600 px)，我们总是把抽屉打开。*/ @media (min-width: 600px) { /* 我们打开抽屉. */ nav{ position:relative; -webkit-transform: translate(0, 0); transform: translate(0, 0); } /* 我们在父服务器上使用 Flexbox. */ body { display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; } main { width: auto; /* flex-grow 主要内容填充所有可用空间。 */ flex-grow: 1; } main > #menu:after { content: '如果宽度超过 600px，抽屉就会保持打开状态。'; }

响应式图片

未改进 body { margin: 0; } img { float: left; 改进： body { margin: 0; } img { float: left; margin-right: 10px; width: calc((100% - 20px)/3); } img:last-of-type{ margin-right: 0; }

鲜为人知的CSS单位

当你设置行内元素height:100%时,你必须使body、框内元素的height为100%，多么麻烦。 你可以直接设置 100vh，1个vh代表着1%的视图高度。 同理，1vw是1%的视图宽度。 高度和宽度可以设置 vmin单位使视图区域最小化，vmax使视图区域最大化。

不同设备显示分辨率的图片

<picture>

  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">

  <source srcset="img_flowers.jpg">

  <img src="img_flowers.jpg" alt="Flowers">

</picture>