1、響應(yīng)式頁面概述
1.1 響應(yīng)式頁面
用chrome瀏覽器來模擬手機(jī)端的瀏覽效果，可以看到手機(jī)端和電腦端訪問同一個網(wǎng)頁時，都能獲得比較好的瀏覽體驗(yàn)。
也就是說，一套代碼可以同時適應(yīng)多個設(shè)備。這樣的網(wǎng)頁就是響應(yīng)式網(wǎng)頁。這樣的網(wǎng)頁，就是基于媒體查詢實(shí)現(xiàn)的。
特別注意的是，我們訪問同一個網(wǎng)站的地址，用手機(jī)可以正常瀏覽，用電腦也可以正常瀏覽，這并不一定就是響應(yīng)式頁面，它只是針對終端設(shè)備的不同，展示了兩套代碼而已。響應(yīng)式頁面強(qiáng)調(diào)的是一套代碼。
2、媒體查詢
通過媒體查詢，我們讓css檢測到瀏覽器視窗的展示尺寸，然后根據(jù)不同的瀏覽器視窗尺寸設(shè)置不同的樣式，進(jìn)而實(shí)現(xiàn)了同一套代碼適應(yīng)不同設(shè)備的功能。
2.1 max-width
媒體查詢是CSS3中增加的新特性，可以使用@media來定義不同的條件和樣式，窗口尺寸（或設(shè)備尺寸）滿足指定條件的時候才會應(yīng)用指定的樣式，實(shí)例代碼如下所示。
<!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)我們將瀏覽器的窗口縮?。ㄒ苿佣说臑g覽方式），當(dāng)瀏覽器尺寸寬度小于600px的時候，元素的背景色會變成藍(lán)色，這就是利用媒體查詢實(shí)現(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
同樣，我們也可以定義“大于指定寬度，樣式生效”，實(shí)例代碼如下所示。
@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)，實(shí)例代碼如下所示。
@media screen and(min-width:600px)and(max-width:900px){
.box{
background-color:blue;
}
}
窗口大于600px并且小于900px的時候，樣式生效，我們可以將瀏覽器窗口由大到小的收縮，可以看到元素顏色變化了兩次。
3、響應(yīng)式頁面
利用媒體查詢實(shí)現(xiàn)一個響應(yīng)式的頁面效果，讓其在PC端可以顯示一個橫線列表，在手機(jī)端可以顯示沖向列表
4、響應(yīng)式頁面的缺點(diǎn)
在真實(shí)項目開發(fā)中，響應(yīng)式頁面并不常用，主要是因?yàn)橐幌聨c(diǎn)。
為終端定制的頁面，用戶體驗(yàn)更好。
響應(yīng)式頁面代碼量會增多，影響網(wǎng)頁性能。
網(wǎng)頁后期維護(hù)成本增加。
除非網(wǎng)頁具備以下特點(diǎn)：
網(wǎng)頁本身并不復(fù)雜。
對用戶體驗(yàn)要求不高。
希望多終端訪問，又希望降低開發(fā)成本。
就可以選擇響應(yīng)式頁面了。
1、移動端頁面布局概述
PC端頁面的網(wǎng)頁重構(gòu)，我們使用最多的單位是px。因?yàn)樵赑C端，大部分頁面效果我們都可以設(shè)置成固定尺寸，
但是在手機(jī)端，這種方案是不可行的，我們必須要按照百分比呈現(xiàn)頁面，才能保證網(wǎng)頁在任何設(shè)備上可以正常顯示。
為了實(shí)現(xiàn)這樣的功能，我們可以將所有的尺寸都設(shè)置成百分比，但是這樣會給前端開發(fā)帶來大量的計算工作。
為了實(shí)現(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布局與百分比布局能實(shí)現(xiàn)相同的效果。
