1、響應式頁面概述
1.1 響應式頁面
用chrome瀏覽器來模擬手機端的瀏覽效果，可以看到手機端和電腦端訪問同一個網頁時，都能獲得比較好的瀏覽體驗。
也就是說，一套代碼可以同時適應多個設備。這樣的網頁就是響應式網頁。這樣的網頁，就是基于媒體查詢實現的。
特別注意的是，我們訪問同一個網站的地址，用手機可以正常瀏覽，用電腦也可以正常瀏覽，這并不一定就是響應式頁面，它只是針對終端設備的不同，展示了兩套代碼而已。響應式頁面強調的是一套代碼。
2、媒體查詢
通過媒體查詢，我們讓css檢測到瀏覽器視窗的展示尺寸，然后根據不同的瀏覽器視窗尺寸設置不同的樣式，進而實現了同一套代碼適應不同設備的功能。
2.1 max-width
媒體查詢是CSS3中增加的新特性，可以使用@media來定義不同的條件和樣式，窗口尺寸（或設備尺寸）滿足指定條件的時候才會應用指定的樣式，實例代碼如下所示。
<!DOCTYPE html>
<htmllang="en">
<head><meta? charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
}
/* 小于指定寬度，樣式生效 */
@media screen and (max-width:600px){
.box{background-color:blue;}
}
</style>
</head>
<body>
<divclass="box"></div>
</body>
</html>
全屏打開瀏覽器的時候（PC端的瀏覽方式），我們可以看到div元素的背景色為紅色，當我們將瀏覽器的窗口縮小（移動端的瀏覽方式），當瀏覽器尺寸寬度小于600px的時候，元素的背景色會變成藍色，這就是利用媒體查詢實現的最基本的響應式頁面，同一個文件，在不同設備上呈現著不同的樣式。
max-width定義的就是標準，符合標準就會讓下面的樣式生效，max-width這個標準的意思就是：小于指定寬度，樣式生效。
2.2 min-width
同樣，我們也可以定義“大于指定寬度，樣式生效”，實例代碼如下所示。
@media screen and(min-width:600px){
.box{
background-color:blue;
}
}
上述代碼與demo01的效果剛好相反，PC端呈現藍色，移動端呈現紅色，min-width的意思是：大于指定寬度，樣式生效。
2.3 多個標準
我們也可以給一個媒體查詢定義多個標準，實例代碼如下所示。
@media screen and(min-width:600px)and(max-width:900px){
.box{
background-color:blue;
}
}
窗口大于600px并且小于900px的時候，樣式生效，我們可以將瀏覽器窗口由大到小的收縮，可以看到元素顏色變化了兩次。
3、響應式頁面
利用媒體查詢實現一個響應式的頁面效果，讓其在PC端可以顯示一個橫線列表，在手機端可以顯示沖向列表
4、響應式頁面的缺點
在真實項目開發中，響應式頁面并不常用，主要是因為一下幾點。
為終端定制的頁面，用戶體驗更好。
響應式頁面代碼量會增多，影響網頁性能。
網頁后期維護成本增加。
除非網頁具備以下特點：
網頁本身并不復雜。
對用戶體驗要求不高。
希望多終端訪問，又希望降低開發成本。
就可以選擇響應式頁面了。
1、移動端頁面布局概述
PC端頁面的網頁重構，我們使用最多的單位是px。因為在PC端，大部分頁面效果我們都可以設置成固定尺寸，
但是在手機端，這種方案是不可行的，我們必須要按照百分比呈現頁面，才能保證網頁在任何設備上可以正常顯示。
為了實現這樣的功能，我們可以將所有的尺寸都設置成百分比，但是這樣會給前端開發帶來大量的計算工作。
為了實現百分比的效果，又能省去大量的計算工作，我們使用rem布局。
2、rem概述
rem是CSS3中新增的單位，我們現在回顧和對比一下css中的常用的單位：
px
em
rem
單位em和rem的區別
em是一個相對單位，它參照的是父級元素的font-size值。
rem也是一個相對的單位，它參照的是html元素的font-size值。
3、rem布局
rem的參照物是html元素的font-size屬性，那么如果html的font-size屬性不變的話，我們使用的rem單位仍然是一個固定的單位，所以我們需要做的是讓html元素的font-size屬性在不同的設備中設置不同的值，這就需要一段js代碼了，代碼如下所示（fontsizeset.js）
(function(doc,win){vardocEl=doc.documentElement,resizeEvt='orientationchange'inwindow?'orientationchange':'resize',recalc=function(){varclientWidth=docEl.clientWidth;if(!clientWidth)return;docEl.style.fontSize=100*(clientWidth/720)+'px';};if(!doc.addEventListener)return;win.addEventListener(resizeEvt,recalc,false);doc.addEventListener('DOMContentLoaded',recalc,false);})(document,window);
我們并不需要理解上面的這段代碼是如何執行的，只需要知道這段代碼可以檢測設備的尺寸，并通過設備的尺寸設置html元素的font-size值，這個font-size值會根據設備尺寸的變化而變化，這樣我們設置相同的rem值，就會起到百分比的作用了。
在上面的代碼中，我們將div的寬和高都設置成了3.6rem，用瀏覽器打開，發現元素寬度與高度相同，并且寬度始終是窗口寬度的50%。這說明rem布局與百分比布局能實現相同的效果。
