1.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的定義
響應(yīng)式Web設(shè)計(jì)（Responsive Web Design）簡(jiǎn)稱：RWD稻爬，基于HTML5和CSS3蒿秦。
RWD這個(gè)名字是Ethan Marcotte于2010年發(fā)明的座享。當(dāng)時(shí)他在A List Apart上寫的一篇綜合運(yùn)用了三種已有技術(shù)（彈性網(wǎng)格布局菱涤、彈性圖片/媒體绸栅、媒體查詢）的文章實(shí)現(xiàn)了一個(gè)解決方案海诲，就叫做“響應(yīng)式Web設(shè)計(jì)”繁莹。
Ethan Marcotte的個(gè)人網(wǎng)頁(yè)
響應(yīng)式Web設(shè)計(jì)可以讓一個(gè)網(wǎng)站同時(shí)適配多種設(shè)備的多個(gè)屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小特幔、輸入方式咨演、設(shè)備/瀏覽器能力）而變化。就是網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪問(wèn)它的視口及設(shè)備的不同而呈現(xiàn)不一樣的樣式蚯斯。（教科書(shū)）
2.RWD的三項(xiàng)組成科技
彈性網(wǎng)格布局
CSS Grid布局 （又名"網(wǎng)格"）薄风，是一個(gè)基于二維網(wǎng)格布局的系統(tǒng)饵较，旨在改變我們基于網(wǎng)格設(shè)計(jì)的用戶界面方式。
彈性的網(wǎng)格布局可以根據(jù)智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局遭赂。（百度百科）
彈性圖片
響應(yīng)式圖片技術(shù)思想：不僅要同比的縮放圖片循诉，還要在小設(shè)備上降低圖片自身的分辨率。這個(gè)技術(shù)的實(shí)現(xiàn)需要使用幾個(gè)相關(guān)文件撇他，我們可以在Github上獲取茄猫。包括一個(gè)JavaScript文件(rwd-images.js)，一個(gè).htaccess文件困肩，以及一些范例資源文件划纽。大致的原理是，rwd-images.js會(huì)檢測(cè)當(dāng)前設(shè)備的屏幕分辨率锌畸，如果是大屏幕設(shè)備勇劣，則向頁(yè)面head部分中添加BASE標(biāo)記，并將后續(xù)的圖片蹋绽、腳本和樣式表加載請(qǐng)求定向到一個(gè)虛擬路徑"/rwd-router"芭毙。當(dāng)這些請(qǐng)求到達(dá)服務(wù)器端，.htacces文件會(huì)決定這些請(qǐng)求所需要的是原始圖片還是小尺寸的"響應(yīng)式圖片"卸耘，并進(jìn)行相應(yīng)的反饋輸出退敦。對(duì)于小屏幕的移動(dòng)設(shè)備，原始尺寸的大圖片永遠(yuǎn)不會(huì)被用到蚣抗。(百度百科）
媒體查詢
W3C的CSS3媒體查詢模塊的規(guī)范侈百，官方給媒體查詢下的定義：媒體查詢包含媒體類型和零個(gè)或多個(gè)檢測(cè)媒體特性的表達(dá)式。width翰铡、height和color都是可用于媒體查詢的特性钝域。使用媒體查詢，可以不必修改內(nèi)容本身锭魔，而讓頁(yè)面適配不同的設(shè)備例证。
使用媒體查詢，可以針對(duì)不同的媒體類型定義不同的樣式迷捧≈郑可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，當(dāng)你重置瀏覽器大小的過(guò)程中漠秋，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面笙蒙。
RUNOOB.COM
3.為什么我們需要響應(yīng)式Web設(shè)計(jì)？
2017年2月至今庆锦，市場(chǎng)調(diào)查機(jī)構(gòu) statcounter 顯示全球的移動(dòng)手機(jī)使用占51.95%捅位、桌面占43.98%、平板占4.07%。
調(diào)查
以前的網(wǎng)站固定寬度通常是960px艇搀，而比這個(gè)更寬的電腦設(shè)備飛速發(fā)展尿扯，全球手機(jī)瀏覽器的使用量開(kāi)始超過(guò)PC瀏覽器。RWD作品適配手機(jī)焰雕、平板和桌面電腦姜胖，適應(yīng)用戶的屏幕大小，為今天和明天的設(shè)備都提供最佳用戶體驗(yàn)淀散。僅使用HTML5和CSS3就可，而不用后端支持蚜锨。近年來(lái)大家開(kāi)始注重手機(jī)及平板上的網(wǎng)頁(yè)視覺(jué)效果档插。不管是從用戶的使用情況還是從社會(huì)發(fā)展到今天的現(xiàn)狀而言，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的出現(xiàn)可以大大提高用戶的體驗(yàn)亚再，相對(duì)于沒(méi)有響應(yīng)式設(shè)計(jì)的網(wǎng)頁(yè)有一定的優(yōu)勢(shì)郭膛，從而獲得更高的利益。
沒(méi)有響應(yīng)式設(shè)計(jì)的網(wǎng)頁(yè)在不同設(shè)備和環(huán)境下?lián)碛邢嗤漠嬅娣招热缬檬謾C(jī)瀏覽则剃，就可能會(huì)出現(xiàn)字體太小，需要點(diǎn)擊的時(shí)候要通過(guò)放大如捅、拖拽等一系列麻煩的方式達(dá)到目的棍现，閱讀時(shí)不能提供符合手機(jī)屏幕的適當(dāng)樣式，造成一定的不便等镜遣。
綜上己肮，因?yàn)槭褂檬謾C(jī)訪問(wèn)瀏覽器的用戶開(kāi)始超過(guò)使用電腦那種大屏的，對(duì)于手機(jī)操作上有諸多不便悲关，所以我們需要響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)谎僻。
4.是否應(yīng)用了RWD的網(wǎng)頁(yè)例子
例如“一葉子”的官網(wǎng)，不管是常規(guī)的設(shè)備還是iPhone6還是iPad寓辱，甚至是其他不同的設(shè)備艘绍，它的頁(yè)面布局都是一樣的，對(duì)于屏幕較小的手機(jī)來(lái)說(shuō)秫筏，其原本適應(yīng)于大屏幕的頁(yè)面布局顯然太過(guò)“小巧”诱鞠，不好操作。如下圖：（同樣的例子還有豆丁網(wǎng)）
一葉子官網(wǎng)
而對(duì)于運(yùn)用了響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的作品跳昼，例如國(guó)外的購(gòu)物網(wǎng)站Snipcart般甲，它在不同設(shè)備上的效果是這樣的：
Snipcart官網(wǎng)
個(gè)人感想
上網(wǎng)瀏覽了很多關(guān)于響應(yīng)式網(wǎng)站的資料，發(fā)現(xiàn)其實(shí)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是有利也有弊的鹅颊，像國(guó)內(nèi)一些視屏網(wǎng)站敷存，愛(ài)奇藝、騰訊等沒(méi)有選擇做響應(yīng)式的網(wǎng)頁(yè)，而選擇開(kāi)發(fā)了適合手機(jī)的APP锚烦。是否值得做響應(yīng)式頁(yè)面也和其頁(yè)面的復(fù)雜性有關(guān)觅闽，例如淘寶等。只有這個(gè)網(wǎng)站適合做響應(yīng)式頁(yè)面涮俄，響應(yīng)式頁(yè)面設(shè)計(jì)才是有意義和價(jià)值的蛉拙。
