響應(yīng)式Web設(shè)計(jì)(Responsive Web design) ,簡(jiǎn)單來(lái)說(shuō)，就是網(wǎng)頁(yè)內(nèi)容會(huì)隨著訪問(wèn)它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式复凳。而RWD即 自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)(Adaptive Web Design)，指能使網(wǎng)頁(yè)自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁(yè)設(shè)計(jì)方式及技術(shù)升略。
由(互聯(lián)網(wǎng)與新媒體)市場(chǎng)調(diào)查機(jī)構(gòu) statcounter 的數(shù)據(jù)圖表可知衷蜓，全球移動(dòng)和平板電腦的市場(chǎng)份額占了相當(dāng)一部分，而且更新率也是非撑信唬快倦踢，因此，為了避免為不斷到來(lái)的新設(shè)備做專門的版本設(shè)計(jì)和開發(fā)而投入大量的人力和物力侠草，我們就需要研發(fā)像響應(yīng)式Web設(shè)計(jì)(Responsive Web design)這樣的對(duì)不同大小屏幕進(jìn)行相應(yīng)的響應(yīng)和調(diào)整的技術(shù)辱挥。
相關(guān)數(shù)據(jù)查詢鏈接如下：http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet
?響應(yīng)式網(wǎng)站設(shè)計(jì)有三個(gè)關(guān)鍵組成部分:1. media query; 2. 流動(dòng)網(wǎng)格;3. 靈活縮放的圖片。
下面列舉一個(gè)采用了響應(yīng)式web設(shè)計(jì)的網(wǎng)站：http://www.etao.com/?
基于RWD而設(shè)計(jì)的網(wǎng)站利用CSS3 media queries規(guī)則來(lái)自動(dòng)適應(yīng)不同訪問(wèn)設(shè)備的屏幕尺寸和顯示要求边涕。而流動(dòng)網(wǎng)格采用頁(yè)面元素大小的相對(duì)單位(百分比或EM)般贼，而非傳統(tǒng)設(shè)計(jì)使用的絕對(duì)單位(像素或點(diǎn)數(shù))，以確定頁(yè)面各組成元素的大小奥吩。最后哼蛆，圖片大小也是采用相對(duì)單位而靈活縮放，不至于在小屏幕的移動(dòng)設(shè)備上超出顯示區(qū)域霞赫。
以及一個(gè)非響應(yīng)式web設(shè)計(jì)的網(wǎng)站進(jìn)行對(duì)比：http://www.sj33.cn/digital/wyll/201504/43741.html ? ?
可以發(fā)現(xiàn)非響應(yīng)式web設(shè)計(jì)的網(wǎng)站無(wú)法根據(jù)屏幕的大小來(lái)自動(dòng)適應(yīng)調(diào)整腮介，從而無(wú)法帶給使用者一個(gè)好的閱讀視角
另外RWD能實(shí)現(xiàn)前后端數(shù)據(jù)的更好交互，從而使瀏覽界面更好地適配
