我们的眼睛在看东西时会自然地遵循一定的模式。通常从左上开始，然后从左到右，再从上到下。
很多网页都是基于网格设计的，这说明网页是按列来布局的。
响应式网格视图通常是 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
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" type="text/css" href="CSS.css"></head><body><div class="row"> <div class="col-6">6 Columns</div> <div class="col-6">6 Columns</div></div><div class="row"> <div class="col-3">3 Columns</div> <div class="col-3">3 Columns</div> <div class="col-3">3 Columns</div> <div class="col-3">3 Columns</div></div> <div class="row"> <div class="col-4">4 Columns</div> <div class="col-4">4 Columns</div> <div class="col-4">4 Columns</div> </div></body></html>效果：
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:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" type="text/css" href="CSS.css"></head><body> <div class="row"> <div class="box-darkBlue"></div> <div class="box-blue"></div> <div class="box-green"></div> </div></body></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:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" type="text/css" href="CSS.css"></head><body> <div class="row"> <div class="box-darkBlue"></div> <div class="box-blue"></div> <div class="box-green"></div> <div class="box-red"></div> <div class="box-orange"></div> </div></body></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:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" type="text/css" href="CSS.css"></head><body> <div class="row"> <div class="box-darkBlue"></div> <div class="row2"> <div class="box-blue"></div> <div class="box-green"></div> </div> <div class="box-red"></div> </div></body></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:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <link rel="stylesheet" type="text/css" href="CSS.css"></head><body> <nav id="drawer" class="dark-blue"> </nav> <main clss="light-blue"> <a id="menu"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M2 6h20v3H2zm0 5h20v3H2zm0 5h20v3H2z"></path> </svg> </a> </main><script> /* * 单击菜单图标时打开抽屉. */var menu = document.querySelector('#menu');var main = document.querySelector('main');var drawer = document.querySelector('#drawer');menu.addEventListener('click', function(e) { drawer.classList.toggle('open'); e.stopPropagation(); });main.addEventListener('click', function() { drawer.classList.remove('open'); });</script></body></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>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
来源：https://www.cnblogs.com/neowu/p/10798558.html