什么是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)？
- 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD）就是網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪問(wèn)他的視口及設(shè)備的不同而呈現(xiàn)不同的樣式
- 響應(yīng)式Web設(shè)計(jì)是Ethan Marcotte發(fā)明的，他曾在A List Apart上發(fā)表了篇響應(yīng)式Web設(shè)計(jì)的文章
為何需要響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)?
從此圖表可以看出other、1366x768（電腦）以及360x640（手機(jī)）的屏幕分辨率占比較大，但除此之外，還有許多其余屏幕分辨率的設(shè)備。因此在網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)的開(kāi)始上不能夠只按照某種分辨率進(jìn)行固定設(shè)計(jì)，否則在更大或者更小分辨率的設(shè)備上，內(nèi)容會(huì)重新編排，或者根據(jù)情況隱藏部分內(nèi)容。
越來(lái)越多的智能移動(dòng)設(shè)備加入到互聯(lián)網(wǎng)中來(lái)，響應(yīng)式web設(shè)計(jì) （ RWD ）的出現(xiàn)，目的是為移動(dòng)設(shè)備提供更好的體驗(yàn)，并且整合從桌面到手機(jī)的各種屏幕尺寸和分辨率，用技術(shù)來(lái)使網(wǎng)頁(yè)適應(yīng)從小到大的不同分辨率的屏幕。
響應(yīng)式web的彈性設(shè)計(jì)使不同用戶端的用戶習(xí)慣舒服的瀏覽頁(yè)面，獲得良好的用戶體驗(yàn)。
響應(yīng)式web設(shè)計(jì)例子
在進(jìn)行web設(shè)計(jì)時(shí)我們的代碼會(huì)有類(lèi)似電話這樣的數(shù)字，有的手機(jī)上它會(huì)自動(dòng)轉(zhuǎn)換成可以撥打電話
在手機(jī)上打開(kāi)頁(yè)面，頁(yè)面也許將那一串?dāng)?shù)字標(biāo)記為電話，誤導(dǎo)網(wǎng)友們對(duì)這串?dāng)?shù)字進(jìn)行錯(cuò)誤的認(rèn)識(shí)
因此為了解決數(shù)字自動(dòng)轉(zhuǎn)換成可撥打電話的問(wèn)題，可以在網(wǎng)頁(yè)中添加下面這行代碼：
這樣有的手機(jī)就不會(huì)對(duì)類(lèi)似電話這樣數(shù)字進(jìn)行自動(dòng)轉(zhuǎn)換成可撥打電話，也不會(huì)誤導(dǎo)網(wǎng)友。
RWD的三項(xiàng)組成科技
彈性網(wǎng)格布局
不同的設(shè)備都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不斷被研發(fā)著的各種新設(shè)備也將帶來(lái)新的屏幕尺寸規(guī)格。用戶還可以通過(guò)轉(zhuǎn)動(dòng)設(shè)備來(lái)任意切換屏幕的定向方式。因此網(wǎng)頁(yè)的網(wǎng)格布局需要彈性化。
為了讓網(wǎng)頁(yè)在不同設(shè)備上體現(xiàn)良好的網(wǎng)頁(yè)布局效果，可以在網(wǎng)頁(yè)的<head>中添加這行代碼：<meta name="viewport" content="width=device-width">
這里的<meta>標(biāo)簽可以告訴瀏覽器怎么渲染網(wǎng)頁(yè)。
彈性圖片
- 在處理圖片問(wèn)題上，通常使用max-width規(guī)則，即保證所有圖片最大限時(shí)為其自身的100%（最大值可以顯示為自身那么大）。
- 當(dāng)然也可以使用width屬性，例如width：100%，但圖片只會(huì)按照該值顯示，而不考慮自身固有寬度，會(huì)導(dǎo)致塔顯示得和視口一樣寬。
媒體查詢
媒體查詢即最小寬度媒體查詢。
- @media指令告訴瀏覽器這里是個(gè)媒體查詢
- and|not|only (media feature)意思是其中的規(guī)則只適用于視口寬度在**em以上的情況
Bryan Rieger對(duì)媒體查詢的看法
CSS媒體查詢的（3級(jí)）規(guī)范
CSS媒體查詢(4級(jí))的草案
