1.背景介紹
隨著科技的發(fā)達(dá)晒屎，使用移動(dòng)設(shè)備諸如手機(jī)平板等獲取信息佃延，社交的人越來(lái)越多现诀。如何在屏幕大小不同的物理設(shè)備上獲得類(lèi)似的使用體驗(yàn)?zāi)兀?很多網(wǎng)站的做法是為不同大小的物理設(shè)備提供不同的網(wǎng)頁(yè)夷磕。但是這樣做很麻煩履肃，需要維護(hù)多個(gè)版本，不夠方便坐桩。如果只寫(xiě)一個(gè)版本尺棋，但是可以適應(yīng)不同寬度的物理設(shè)備，那該多好绵跷。自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）應(yīng)運(yùn)而生膘螟。
2.知識(shí)剖析
什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)？ 頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶(hù)行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)碾局、屏幕尺寸荆残、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。簡(jiǎn)單來(lái)說(shuō)就是同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕净当，根據(jù)屏幕寬度内斯，自動(dòng)調(diào)整布局（layout）。
3.常見(jiàn)問(wèn)題
問(wèn)題1:如何實(shí)現(xiàn)自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)像啼？
問(wèn)題2:viewport的作用俘闯。
4.解決方案
（1）在網(wǎng)頁(yè)代碼的頭部，加入一行meta標(biāo)簽：meta name="viewport" content=content="width=device-width, initial-scale=1"這段代碼意思是說(shuō)網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width）忽冻，原始縮放比例（initial-scale=1）為1.0真朗，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。viewport是應(yīng)對(duì)手機(jī)模式訪問(wèn)網(wǎng)站,網(wǎng)頁(yè)對(duì)屏幕而做的一些設(shè)置僧诚。設(shè)置viewport后遮婶，移動(dòng)頁(yè)面就可以進(jìn)行拖動(dòng)，放大縮小湖笨。 這行標(biāo)簽在編譯時(shí)會(huì)轉(zhuǎn)化成如下的語(yǔ)義：viewport { width: device-width; initial-scale: 1.0; }（2）不使用絕對(duì)寬度旗扑，使用相對(duì)單位 具體來(lái)講CSS代碼不能指定像素寬度為xx px;只能指定百分比寬度width: xx%;或者width:auto;字體只能使用相對(duì)大小（em,rem,vw,vh,vmin,vmax)等赶么。
（3）流式布局 隨著物理設(shè)備尺寸變小肩豁，內(nèi)容將會(huì)占據(jù)更多的垂直空間，下方的內(nèi)容會(huì)被往下推辫呻。這就是所謂的流動(dòng)清钥。
（4）通過(guò)媒體查詢(xún)選擇加載CSS?//不超過(guò)600px，字體大小為默認(rèn)
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
<1>何時(shí)選擇自適應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)放闺？
（1）以網(wǎng)站的目標(biāo)族群來(lái)考量
純粹找資料>手機(jī)版網(wǎng)頁(yè)
如果你的網(wǎng)站使用者只是使用行動(dòng)裝置來(lái)找資料的祟昭，那就拋開(kāi)酷炫效果的設(shè)計(jì)，只留下必要的資訊怖侦，也就是做單獨(dú)的手機(jī)版網(wǎng)頁(yè)篡悟。
購(gòu)物行為(線(xiàn)上購(gòu)物車(chē)) >手機(jī)版網(wǎng)頁(yè)
如果你希望使用者能在你的網(wǎng)站上有行動(dòng)裝置購(gòu)物的行為谜叹，那么你也應(yīng)該要選擇手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)。去掉無(wú)用的裝飾花邊搬葬，將商品分類(lèi)選項(xiàng)重新設(shè)計(jì)荷腊，讓手機(jī)螢?zāi)粚?zhuān)注在購(gòu)物的流程以及產(chǎn)品的展示上，這樣才能獲得大眾的使用意愿急凰。
資訊閱讀(部落格) >手機(jī)版網(wǎng)頁(yè)
如果你的網(wǎng)站文字資訊量很大女仰，如報(bào)紙、雜記等網(wǎng)站抡锈，手機(jī)版網(wǎng)站也會(huì)是首選疾忍。
基本上只要不涉及以上三種要素，都可以做自適應(yīng)網(wǎng)頁(yè)床三。
（2）以網(wǎng)頁(yè)設(shè)計(jì)排版角度來(lái)考量
˙結(jié)構(gòu)復(fù)雜>手機(jī)版網(wǎng)頁(yè)
如按鈕一罩、分類(lèi)等可以超連結(jié)的元件很多，或是喜歡電腦版有許多花邊元件的網(wǎng)站業(yè)主撇簿，建議做手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)
<2>自適應(yīng)和響應(yīng)式的區(qū)別
自適應(yīng)：讓同一張網(wǎng)頁(yè)自動(dòng)適應(yīng)不同大小的屏幕聂渊，根據(jù)屏幕寬度，自動(dòng)調(diào)整布局（layout）
響應(yīng)式：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)指的是頁(yè)面的布局（流動(dòng)網(wǎng)格补疑、靈活的圖像及媒介查詢(xún)）歧沪。總體目標(biāo)就是去解決設(shè)備多樣化問(wèn)題莲组。 可以說(shuō)響應(yīng)式布局包含了自適應(yīng)布局诊胞，但是響應(yīng)式的成本會(huì)更高，因?yàn)樗枰紤]不同頁(yè)面寬度下不同的頁(yè)面布局锹杈，而自適應(yīng)只考慮頁(yè)面能自適應(yīng)屏幕不溢出就夠了
7.參考文獻(xiàn)
參考一：阮一峰
