響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design簡(jiǎn)稱(chēng)RWD）這個(gè)術(shù)語(yǔ)，由伊桑·馬科特（Ethan Marcotte）提出。他在A List Apart發(fā)表了一篇開(kāi)創(chuàng)性的文章，將三種已有的開(kāi)發(fā)技術(shù)（彈性網(wǎng)格、彈性圖片、媒體查詢(xún)）整合起來(lái)，并命名為響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。
響應(yīng)式網(wǎng)站設(shè)計(jì)應(yīng)根據(jù)用戶(hù)使用的設(shè)備的分辨率大小進(jìn)行相應(yīng)的響應(yīng)與調(diào)整，最大限度滿(mǎn)足不同設(shè)備用戶(hù)體驗(yàn)需求。
響應(yīng)式網(wǎng)站設(shè)計(jì)就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，不需要為每個(gè)終端做一個(gè)特定的版本。簡(jiǎn)單地理解：一個(gè)響應(yīng)式網(wǎng)站=手機(jī)端網(wǎng)站+pad端網(wǎng)站+PC端網(wǎng)站。具體的實(shí)現(xiàn)方式由多方面決定，包括彈性網(wǎng)格、彈性圖片、CSS媒體查詢(xún)（media query）的使用等。
彈性網(wǎng)格（flexible grids）
可基于屏幕分辨率擴(kuò)展或拉伸內(nèi)容。
彈性圖片（flexible grids）
在小屏幕上可縮小尺寸，并可擴(kuò)展至最大尺寸以支持大屏幕。
媒體查詢(xún)（media queries）
是放在站點(diǎn)HTML和樣式表種的代碼段，用來(lái)收集設(shè)備顯示能力的信息以支持多種形式的界面。
響應(yīng)式網(wǎng)站的優(yōu)點(diǎn)：
1、用戶(hù)體驗(yàn)友好
隨著電腦尺寸多元化，智能設(shè)備（pad/智能手機(jī)）普及化，在當(dāng)下追求用戶(hù)體驗(yàn)至上的時(shí)代，之前網(wǎng)站普遍使用固定的寬度（960px）逐漸滿(mǎn)足不了現(xiàn)在不同設(shè)備與不同分辨率需求。在高分辨率電腦寬屏顯示器上，兩邊留白過(guò)多。在手機(jī)上顯示，內(nèi)容顯示過(guò)小，用戶(hù)為了看清楚，首先需要放大界面，再左右拖拖界面。響應(yīng)式網(wǎng)站可以根據(jù)不同終端、不同尺寸和不同應(yīng)用環(huán)境，自動(dòng)調(diào)整界面布局、展示內(nèi)容、內(nèi)容大小，提供非常好視覺(jué)展示效果，一致性友好體驗(yàn)。
2、節(jié)省設(shè)計(jì)開(kāi)發(fā)成本
相對(duì)需要開(kāi)發(fā)電腦網(wǎng)站、pad網(wǎng)站、手機(jī)網(wǎng)站來(lái)說(shuō)，響應(yīng)式網(wǎng)站節(jié)省設(shè)計(jì)開(kāi)發(fā)成本的。
從設(shè)計(jì)角度說(shuō)，一般來(lái)說(shuō)，響應(yīng)式網(wǎng)站界面只需要設(shè)計(jì)兩套設(shè)計(jì)效果圖就行了，電腦端與pad端基本可以共用一套設(shè)計(jì)效果圖，手機(jī)端重新設(shè)計(jì)一套就可以了；
從前端開(kāi)發(fā)角度說(shuō)，再不需要開(kāi)發(fā)三套完成不一樣的前端代碼，只需要根據(jù)臨界點(diǎn)為不同終端開(kāi)發(fā)三套不同的CSS樣式；
從后期維護(hù)角度來(lái)說(shuō)，再不需要分別維護(hù)pc界面、pad界面、移動(dòng)界面，專(zhuān)心維護(hù)一個(gè)網(wǎng)站即可。
3、SEO友好
由于響應(yīng)網(wǎng)站在不同終端有友好的界面展示效果，用戶(hù)可以與網(wǎng)站一直保持聯(lián)系，比如URL不變積累分享；通過(guò)單一的URL地址手機(jī)所有的社交分享鏈接最佳化搜索引擎。搜索引擎也在變得越來(lái)越聰明，它們足夠智能可以完成移動(dòng)網(wǎng)站和桌面網(wǎng)站的鏈接。Google也建議優(yōu)先采用響應(yīng)式設(shè)計(jì)，因?yàn)闊o(wú)論是什么網(wǎng)頁(yè)版本都是相同的HTML、相同的內(nèi)容，Google最容易處理。
響應(yīng)式網(wǎng)站的缺點(diǎn)：
1、對(duì)老版IE兼容性不友好
對(duì)于老版本IE（IE6、IE7、IE8）支持不好，這是一個(gè)致命的問(wèn)題，如果你的網(wǎng)站用戶(hù)大多還采用老版本的IE的話，建議不做響應(yīng)式網(wǎng)站。
2、靈活性有所欠缺
基于不同終端的設(shè)備屬性不同，對(duì)產(chǎn)品用戶(hù)體驗(yàn)要求就會(huì)截然不同。內(nèi)容比較多帶有功能性的網(wǎng)站不適合做響應(yīng)式網(wǎng)站設(shè)計(jì)，如：電商類(lèi)型網(wǎng)站，寬屏的PC端內(nèi)容如果全部要在手機(jī)端進(jìn)行展示，勢(shì)必導(dǎo)致手機(jī)端的界面非常長(zhǎng)，需要根據(jù)手機(jī)端屬性進(jìn)行重新信息框架設(shè)計(jì)，這樣對(duì)響應(yīng)網(wǎng)站要求非常高，實(shí)現(xiàn)難度與成本非常高。但是大型網(wǎng)站為了提高用戶(hù)體驗(yàn)，通常做法，把高分辨率寬屏網(wǎng)站最小的響應(yīng)尺寸響應(yīng)到1024px，不再適配手機(jī)端，手機(jī)端重新設(shè)計(jì)開(kāi)發(fā)一套手機(jī)網(wǎng)站，簡(jiǎn)單理解為2.5響應(yīng)，如：電商網(wǎng)站亞馬遜，Calvin Klein、Nike、視頻網(wǎng)站Youtube等。
3、速度可能會(huì)變慢
由于響應(yīng)式頁(yè)面是同時(shí)下載多套CSS樣式代碼，可能在手機(jī)上就下載PC、pad的冗余代碼，導(dǎo)致文件變大，影響加載速度。不過(guò)CSS樣式的代碼占用內(nèi)存相對(duì)圖片來(lái)說(shuō)不算大，所以如果前端編程處理得好前提之下，這就不會(huì)影響網(wǎng)站加載速度。
四川創(chuàng)企科技有限責(zé)任公司企業(yè)給與企業(yè)官網(wǎng)基本建設(shè)設(shè)計(jì)開(kāi)發(fā)（含APP）、著名品牌咨詢(xún)策劃方案、品牌推廣推廣營(yíng)銷(xiāo)等大數(shù)據(jù)技術(shù)全用戶(hù)價(jià)值一體化服務(wù)。重要卓越團(tuán)隊(duì)由大數(shù)據(jù)技術(shù)技術(shù)專(zhuān)業(yè)工作人員和營(yíng)銷(xiāo)專(zhuān)業(yè)工作人員構(gòu)成，具有10年系統(tǒng)設(shè)計(jì)開(kāi)發(fā)工作經(jīng)歷，6年品牌推廣實(shí)際個(gè)股股票操盤(pán)工作經(jīng)歷。
四川創(chuàng)企——互聯(lián)網(wǎng)全價(jià)值鏈一體化服務(wù)商，互聯(lián)網(wǎng)綜合服務(wù)“實(shí)戰(zhàn)派”！依托深厚的系統(tǒng)研發(fā)實(shí)力，豐富 的營(yíng)銷(xiāo)推廣操盤(pán)經(jīng)驗(yàn)。
四川創(chuàng)企科技核心團(tuán)隊(duì)近幾年成功的操盤(pán)了多家互聯(lián)網(wǎng)企業(yè)，伴隨企業(yè)網(wǎng)站從0到1，品牌從0到1，用戶(hù)從0 到1，并迅速成為各“細(xì)分領(lǐng)域”領(lǐng)導(dǎo)品牌！我們幫助企業(yè)進(jìn)行品牌診斷，提出精準(zhǔn)的營(yíng)銷(xiāo)定位，并通過(guò)強(qiáng) 大的整合營(yíng)銷(xiāo)資源，幫助品牌跳出同質(zhì)化競(jìng)爭(zhēng)，獲得強(qiáng)勁的市場(chǎng)競(jìng)爭(zhēng)力！
