一、響應式布局
定寬布局的局限：屏幕越來越寬，而定寬的寬度是固定的，看定寬的網頁不美觀
屏幕也在一直往小變，定寬也不合適，看不到完整的網頁內容
在這種情況之下，就出現了一種自適應布局，分別是早起的流動式布局（根據浮動，基本淘汰）和百分比寬度布局（還有一些應用）。
百分比布局的局限：不夠完美，沒法得到一個很好的顯示效果。
屏幕太大，撐滿整個屏幕，不好，屏幕太小，畫面太過拘謹也不好。
屏幕尺寸過於碎片化，我們到底要設計什么樣的網頁才能滿足所有人呢？
可以采取一個網站有多個尺寸的適配，兩套設計方案，但是這樣畢竟是浪費了人力成本。
有沒有一套方案，就在所有終端都有比較好的呈現效果呢？
方案就是響應式布局！
在同一張網頁，根據屏幕大小的不同，自動調整網頁之中的內容布局
響應式布局如何實現？
1、實現響應式布局的三個要素：
viewport視口設置
@media媒體查詢
不要把尺寸寫死：多用百分比寬度來確定布局尺寸
多用rem em來確定布局尺寸（在第六部分有更具體的說明）
多用vh vw來確定布局尺寸（在第七部分有更具體的說明）
2、視口設置：
視口就是可見的屏幕尺寸
視口不說高度只說寬度，因為高度是根據內容撐開的，寬度才是需要設置的
移動端：視口就是屏幕的大小
因為都是全屏顯示的一般
設置方法：設置meta標簽就可以
媒體查詢：查詢我們用什么設備來訪問網頁
媒體查詢查的其實是視口寬度
二、媒體查詢的寫入方式：
1、style標簽中的media屬性
<style media="screen and (max-width:340px)"> 屏幕不超過340的時候才執行下面的內容
body{
background:#00a9c1;
}
<style>
不同的媒體查詢可以並列起來（上下兩個媒體查詢可以一起寫）
<style media="screen and (min-width:340px) and (max-width:720px)">
body{
background:rgb(16,136,65);
}
</style>
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" 4 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 5 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 6 <title>Document</title> 7 <style> 8 body{ 9 margin: 0; 10 } 11 </style> 12 <style media="screen and (max-width:340px)"> 13 body{ background: #00a9c1; } 14 </style> 15 16 <style media="screen and (min-width:340px) and (max-width:720px)"> 17 body{ background: rgb(16,136,65); } 18 </style> 19 </head>
2、在link標簽中設置media屬性
上述代碼分別設置了寬度小於340px和340-720px的背景顏色。下面我們通過引入外部css樣式的方法來繼續寫720px-1080px的樣式。
<link rel="stylesheet" href="720-1080.css" media="screen and (min-width:720px) and (max-width:1080px)">
並制定css的內容 body{ background: rgb(34,205,210); }
3、外鏈css樣式中的@media屬性（用的最多）
只引入外部css文件，查詢全部寫在外部css文件中。完美的實現了內容和樣式的分離。
在head標簽中寫入： <link rel="stylesheet" href="1080.css">
在1080.css中寫入：
1 @media screen and (min-width:1080px) and (max-width:1100px) { 2 body{ 3 background: rgb(255,0,255); 4 } 5 }
這段代碼指定了網頁的寬度在1080-1100的寬度的時候顯示背景為紫色。
三、媒體查詢的尺寸是如何確定的？
http://screensiz.es/phone 是一個前端開發者必備的一個網站，上面列出了市面上大部分常見機型的分辨率大小。
我們在設計分辨率的節點的時候，要以比較關機的機型的分辨率作為參考來設置。
比如iPhone4、5的寬度是320px，這個節點就非常重要，它是小屏幕手機的一個分界點，一般都會在媒體查詢的時候設置這個點。
ipad mini的寬度是768，所以第二個節點就設置為768 。
附：iPad媒體查詢的寫法
@media only screen and (min-width:768px) and (max-width:1024px){
語句
}
iPhone媒體查詢的寫法
@media only screen and (min-width:320px) and (max-width:767px){
語句
}
四、到底如何使用媒體查詢設置網頁？
響應式網頁、或者說媒體查詢的本質是布局。
首選需要考慮的是：你是想從小往大做，還是想從大往小做。這是兩種完全不同的設計方案。
你的網頁本身是現有電腦端，從電腦端往手機端適配，還是一開始就是做給移動端看的，再適配pc。
對於媒體查詢的影響就是：媒體查詢是從小往大了寫還是從大往小了寫，是寫min-width還是寫max-width（真正用的時候只寫一個）。
附鏈接：優雅降級和漸進增強
響應式布局CSS3 Media Queries中屏幕分辨率順序寫法比較
五、最麻煩的問題——兼容性
IE6、IE7、IE8是不支持媒體查詢的。
解決方案：css3-mediaqueries.js。引入此文件可以解決IE6-8無法實現響應式媒體查詢的尷尬。
在Bootstrap上面我們可以找到這個在線的庫。
（在bootstrap上面搜索css3之后就可以看到）
引入地址的寫法：
<!--[if lt IE 9]> //條件注釋判斷是IE9以下版本的瀏覽器
<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.js"></script>（完整版）
<script src="https://cdn.bootcss.com/livingston-css3-mediaqueries-js/1.0.0/css3-mediaqueries.min.js"></script>（min版，兩個版本任選其一）
<![endif]-->
六、 em & rem
em、rem是尺寸單位，可以用在字體上面，也可以用在其他元素上面。
取值來源：
em：父級元素上定義的font-size為基准的倍率尺寸。
比如：html結構為<div><p></p></div>
樣式里面設置div{
font-size:20px;
}
p{
width:30em;
height:2em;
}
通過例子我們可以知道，em取值的大小是根據父級設置的字體大小來確定的，默認情況下1em=16px（就是瀏覽器默認字體大小），但em不僅可以用於設置字體的大小，還可以用於設置其他元素的大小（如p、input等）。
第二個例子：<div class="outer">
<div class="middle">
<div class="inner">
</div>
</div>
</div>
然后設置樣式：.outer{ font-size=100px }
.middle{ font-size=0.5em }
.inner{ width:3em;height:3em }
inner的寬高是150px。因為字體的尺寸是可以繼承的，middle的大小是50px，inner的大小就是3個0.5em，也就是150px，而不是300px。
通過這個例子我們可以知道，在嵌套中計算字體大小是比較麻煩的，所以有了rem的這個單位。
rem：root font-size+em，即設定html的字體大小，根據這個大小來設定其他元素的大小。這個html的字體大小不能設定為10px，推薦為20px。
通過引入resize.js，可以方便設置rem。
1 /*獲得頁面寬度后動態修改html上的fontsize 2 * 320為iphone5設計稿下的頁面寬度，如下設置后頁面的頁面在iphone5等寬屏幕上html 3 * 的font-size會變為20px，即 1rem = 20px 1px=0.05rem 4 * 所以設置元素尺寸的時候，如果測量設計稿 15px 則需設置尺寸為 (0.05*15)rem = 0.75rem 5 */ 6 7 8 !(function(doc, win) { 9 var docEle = doc.documentElement, 10 evt = "onorientationchange" in window ? "orientationchange" : "resize", 11 fn = function() { 12 var width = docEle.clientWidth; 13 width && (docEle.style.fontSize = 20 * (width / 320) + "px"); 14 }; 15 16 win.addEventListener(evt, fn, false); 17 doc.addEventListener("DOMContentLoaded", fn, false); 18 19 }(document, window));
上面的例子以iPhone4、iPhone5的320像素為參考，以20像素為基准，在這些設備上設置1rem顯示的就是20px。如果設計稿要求以320px的屏幕為基准顯示15px，則需設置元素大小為0.75rem。
七、 vh、vw
v代表device（設備），h即height，w即width
通過當前設備視口按照百分比來取值
例子：height：10vh即視口大小10%的高度。以iPhone5為例，iPhone5視口高度568px，10vh就是56.8px。