1寄纵、響應(yīng)式頁面概述
1.1 響應(yīng)式頁面
用chrome瀏覽器來模擬手機(jī)端的瀏覽效果，可以看到手機(jī)端和電腦端訪問同一個網(wǎng)頁時，都能獲得比較好的瀏覽體驗肖揣。
也就是說痹筛，一套代碼可以同時適應(yīng)多個設(shè)備开泽。這樣的網(wǎng)頁就是響應(yīng)式網(wǎng)頁。這樣的網(wǎng)頁口四，就是基于媒體查詢實現(xiàn)的孵运。
特別注意的是，我們訪問同一個網(wǎng)站的地址窃祝，用手機(jī)可以正常瀏覽掐松，用電腦也可以正常瀏覽，這并不一定就是響應(yīng)式頁面粪小，它只是針對終端設(shè)備的不同，展示了兩套代碼而已抡句。響應(yīng)式頁面強(qiáng)調(diào)的是一套代碼探膊。
2、媒體查詢
通過媒體查詢待榔，我們讓css檢測到瀏覽器視窗的展示尺寸逞壁，然后根據(jù)不同的瀏覽器視窗尺寸設(shè)置不同的樣式，進(jìn)而實現(xiàn)了同一套代碼適應(yīng)不同設(shè)備的功能锐锣。
2.1 max-width
媒體查詢是CSS3中增加的新特性腌闯，可以使用@media來定義不同的條件和樣式，窗口尺寸（或設(shè)備尺寸）滿足指定條件的時候才會應(yīng)用指定的樣式雕憔，實例代碼如下所示姿骏。
<!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元素的背景色為紅色分瘦，當(dāng)我們將瀏覽器的窗口縮小（移動端的瀏覽方式）琉苇，當(dāng)瀏覽器尺寸寬度小于600px的時候嘲玫，元素的背景色會變成藍(lán)色，這就是利用媒體查詢實現(xiàn)的最基本的響應(yīng)式頁面并扇，同一個文件去团，在不同設(shè)備上呈現(xiàn)著不同的樣式。
max-width定義的就是標(biāo)準(zhǔn)穷蛹，符合標(biāo)準(zhǔn)就會讓下面的樣式生效土陪，max-width這個標(biāo)準(zhǔn)的意思就是：小于指定寬度，樣式生效俩莽。
2.2 min-width
同樣旺坠，我們也可以定義“大于指定寬度，樣式生效”扮超，實例代碼如下所示取刃。
@media screen and(min-width:600px){
.box{
background-color:blue;
}
}
上述代碼與demo01的效果剛好相反蹋肮，PC端呈現(xiàn)藍(lán)色，移動端呈現(xiàn)紅色璧疗，min-width的意思是：大于指定寬度坯辩，樣式生效。
2.3 多個標(biāo)準(zhǔn)
我們也可以給一個媒體查詢定義多個標(biāo)準(zhǔn)崩侠，實例代碼如下所示漆魔。
@media screen and(min-width:600px)and(max-width:900px){
.box{
background-color:blue;
}
}
窗口大于600px并且小于900px的時候，樣式生效却音，我們可以將瀏覽器窗口由大到小的收縮改抡，可以看到元素顏色變化了兩次。
3系瓢、響應(yīng)式頁面
利用媒體查詢實現(xiàn)一個響應(yīng)式的頁面效果阿纤，讓其在PC端可以顯示一個橫線列表，在手機(jī)端可以顯示沖向列表
4夷陋、響應(yīng)式頁面的缺點
在真實項目開發(fā)中欠拾，響應(yīng)式頁面并不常用，主要是因為一下幾點骗绕。
為終端定制的頁面藐窄，用戶體驗更好。
響應(yīng)式頁面代碼量會增多酬土，影響網(wǎng)頁性能荆忍。
網(wǎng)頁后期維護(hù)成本增加。
除非網(wǎng)頁具備以下特點：
網(wǎng)頁本身并不復(fù)雜诺凡。
對用戶體驗要求不高东揣。
希望多終端訪問，又希望降低開發(fā)成本腹泌。
就可以選擇響應(yīng)式頁面了嘶卧。
1、移動端頁面布局概述
PC端頁面的網(wǎng)頁重構(gòu)凉袱，我們使用最多的單位是px芥吟。因為在PC端，大部分頁面效果我們都可以設(shè)置成固定尺寸专甩，
但是在手機(jī)端钟鸵，這種方案是不可行的，我們必須要按照百分比呈現(xiàn)頁面涤躲，才能保證網(wǎng)頁在任何設(shè)備上可以正常顯示棺耍。
為了實現(xiàn)這樣的功能，我們可以將所有的尺寸都設(shè)置成百分比种樱，但是這樣會給前端開發(fā)帶來大量的計算工作蒙袍。
為了實現(xiàn)百分比的效果俊卤，又能省去大量的計算工作，我們使用rem布局害幅。
2消恍、rem概述
rem是CSS3中新增的單位，我們現(xiàn)在回顧和對比一下css中的常用的單位：
px
em
rem
單位em和rem的區(qū)別
em是一個相對單位以现，它參照的是父級元素的font-size值狠怨。
rem也是一個相對的單位，它參照的是html元素的font-size值邑遏。
3佣赖、rem布局
rem的參照物是html元素的font-size屬性，那么如果html的font-size屬性不變的話记盒，我們使用的rem單位仍然是一個固定的單位茵汰，所以我們需要做的是讓html元素的font-size屬性在不同的設(shè)備中設(shè)置不同的值，這就需要一段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);
我們并不需要理解上面的這段代碼是如何執(zhí)行的，只需要知道這段代碼可以檢測設(shè)備的尺寸栏豺，并通過設(shè)備的尺寸設(shè)置html元素的font-size值彬碱，這個font-size值會根據(jù)設(shè)備尺寸的變化而變化，這樣我們設(shè)置相同的rem值奥洼，就會起到百分比的作用了巷疼。
在上面的代碼中，我們將div的寬和高都設(shè)置成了3.6rem灵奖，用瀏覽器打開嚼沿，發(fā)現(xiàn)元素寬度與高度相同，并且寬度始終是窗口寬度的50%瓷患。這說明rem布局與百分比布局能實現(xiàn)相同的效果骡尽。
