在當(dāng)今這個(gè)互聯(lián)網(wǎng)產(chǎn)業(yè)日益發(fā)達(dá)的時(shí)代，隨著智能手機(jī)和平板電腦的快速普及，一個(gè)網(wǎng)站面對(duì)的用戶屏幕可以說(shuō)是各種各樣的，為了更好的用戶體驗(yàn)，就提出了網(wǎng)頁(yè)設(shè)計(jì)中的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)與自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)兩種方法，本文將帶大家了解這兩種方法的區(qū)別。

當(dāng)你網(wǎng)上搜索這兩個(gè)關(guān)鍵詞時(shí)，你會(huì)發(fā)現(xiàn)有人可能把它們混淆成了一種，一些博文解釋這兩個(gè)概念時(shí)，也涉及很多專(zhuān)業(yè)名詞和相關(guān)技術(shù)，本文暫不討論技術(shù)，力圖用簡(jiǎn)單明了的例子和表述解釋兩者的差別。

1、響應(yīng)式設(shè)計(jì)（Responsive Web Design）

響應(yīng)式設(shè)計(jì)一詞首先由網(wǎng)頁(yè)設(shè)計(jì)師兼開(kāi)發(fā)人員Ethan Marcotte在他的“ 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)”一書(shū)中創(chuàng)造。響應(yīng)式設(shè)計(jì)通過(guò)調(diào)整設(shè)計(jì)元素的位置以適應(yīng)可用空間來(lái)響應(yīng)瀏覽器寬度的變化。

一般來(lái)說(shuō)，響應(yīng)式設(shè)計(jì)（RWD） 傾向于只改變?cè)氐耐庥^布局，而不大幅度改變內(nèi)容。

 Jeffrey Z. 總結(jié)非常好，把 RWD 定義為一切能用來(lái)為各種分辨率和設(shè)備性能優(yōu)化視覺(jué)體驗(yàn)的技術(shù)，簡(jiǎn)單的概括，服務(wù)器不知道來(lái)訪的設(shè)備是什么，所有的設(shè)備都是用的同一套邏輯。純正的響應(yīng)式設(shè)計(jì)（RWD）非常適合CDN。

響應(yīng)式布局能夠兼容不同屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)，不同尺寸下彈性顯示不同的響應(yīng)式內(nèi)容（圖片、多媒體）

設(shè)計(jì)思路：移動(dòng)優(yōu)先：一切從最小屏幕的手機(jī)端開(kāi)始（比如 iPhone 的 320px ），先確定內(nèi)容，然后逐級(jí)往大屏幕設(shè)計(jì)。不同于原來(lái)網(wǎng)頁(yè)設(shè)計(jì)，總是從桌面電腦的 1024px 開(kāi)始的。

03

2、自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（Adaptive Web Design）

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)由網(wǎng)頁(yè)設(shè)計(jì)師亞倫·古斯塔夫森（Aaron Gustafson）于2011年在《Crafting Rich Experiences With Progressive Enhancement》一書(shū)中介紹。它也被稱(chēng)為網(wǎng)站的漸進(jìn)增強(qiáng)

自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（AWD）促進(jìn)創(chuàng)建網(wǎng)頁(yè)的多個(gè)版本以更好地適應(yīng)用戶的設(shè)備，而不是在所有設(shè)備上加載（并且看起來(lái)）相同的單個(gè)靜態(tài)頁(yè)面，或者單個(gè)頁(yè)面重新排序和調(diào)整 內(nèi)容的 大小響應(yīng)地基于用戶的設(shè)備/ 屏幕尺寸 / 瀏覽器。

它的策略是優(yōu)化移動(dòng)網(wǎng)站的可讀性，最常見(jiàn)的做法涉及使用移動(dòng)設(shè)備和桌面一個(gè)完全獨(dú)立的網(wǎng)站，與通常的移動(dòng)設(shè)備重定向到網(wǎng)站的移動(dòng)版本提供一個(gè)子域（常第三級(jí)子域，表示為“m” ;例如http：// m .website.com /）。

在自適應(yīng)設(shè)計(jì)中，為六種最常見(jiàn)的屏幕寬度開(kāi)發(fā)六種設(shè)計(jì)是正常的; 320,480,760,960,1200和1600像素

今天，用于移動(dòng)和桌面查看的兩個(gè)獨(dú)立靜態(tài)站點(diǎn)的使用正在逐步淘汰，而服務(wù)器端腳本則用于動(dòng)態(tài)提供服務(wù)生成的頁(yè)面或動(dòng)態(tài)決定要提供的靜態(tài)頁(yè)面的版本。

服務(wù)器知道用戶是從手機(jī)上訪問(wèn)的，所以就發(fā)送手機(jī)上專(zhuān)用的資源給手機(jī)，這樣打開(kāi)會(huì)更快些。AWD其實(shí)是CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）不友好的，因?yàn)?/span>CDN不會(huì)識(shí)別訪問(wèn)設(shè)備哦，至少目前還沒(méi)有一個(gè)支持。

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（RWD）和自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（AWD）

的關(guān)系和特點(diǎn)

響應(yīng)式布局的特點(diǎn)：

1、節(jié)省人力開(kāi)發(fā)成本，不需要同是維護(hù)移動(dòng)端和pc端；

2、表現(xiàn)力一致，在不同平臺(tái)上看到的東西是基本一致的，會(huì)讓感覺(jué)體驗(yàn)良好；

3、跨平臺(tái)：在手機(jī)、pad、電腦上都有不俗的表現(xiàn)。

自適應(yīng)布局的特點(diǎn)：

1、實(shí)施起來(lái)代價(jià)低，測(cè)試容易，讓你的網(wǎng)站更可控，是一種更切合實(shí)際的解決方案。

2、訪問(wèn)速度快，搜索引擎偏好。

關(guān)系：

兩者并不排斥，有時(shí)候最佳實(shí)踐是采用兩種技術(shù)的組合來(lái)支持完整的硬件和軟件。

適合的場(chǎng)景：

響應(yīng)式設(shè)計(jì)不適合于大型門(mén)戶或電商網(wǎng)站，因?yàn)槠浠驹瓌t是不會(huì)因?yàn)樵O(shè)備不同而給予用戶不同的內(nèi)容（比如在低分辨率的設(shè)備上刪減某些內(nèi)容），所以一般大型門(mén)戶或電商網(wǎng)站都會(huì)提供一個(gè)移動(dòng)版設(shè)備的網(wǎng)站，或者只能縮放查看

響應(yīng)式設(shè)計(jì)是比較容易和花費(fèi)更少的工作來(lái)實(shí)現(xiàn)。它在每個(gè)屏幕尺寸上對(duì)您的設(shè)計(jì)提供的控制較少，但它是目前創(chuàng)建新網(wǎng)站的首選方法。這也可能與大多數(shù)內(nèi)容管理系統(tǒng)（CMS）（如WordPress，Joomla等）可用的大量廉價(jià)模板有關(guān) - 畢竟，誰(shuí)想要重新發(fā)明輪子？

對(duì)于已經(jīng)上線的網(wǎng)站，直接改造成響應(yīng)式布局會(huì)有困難，一般采用m.xxx的方法（自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)）獨(dú)立實(shí)現(xiàn)移動(dòng)端

小結(jié)一下：

簡(jiǎn)單來(lái)說(shuō)，響應(yīng)式設(shè)計(jì)（RWD）目標(biāo)是一個(gè)頁(yè)面在所有終端上（各種尺寸的pc，手機(jī)，智能終端上的web瀏覽器）都顯示出令人滿意的效果。

而自適應(yīng)設(shè)計(jì)（AWD）是為不同的屏幕或設(shè)備創(chuàng)建不同的頁(yè)面（或者說(shuō)頁(yè)面布局），通過(guò)服務(wù)器和瀏覽器的共同協(xié)作，為用戶提供適合的頁(yè)面，一個(gè)站點(diǎn)一般會(huì)通過(guò)手機(jī)版或平板版或桌面版去實(shí)現(xiàn)。

廈門(mén)網(wǎng)站建設(shè)，網(wǎng)站優(yōu)化，福建谷歌推廣，小程序開(kāi)發(fā)，企業(yè)郵箱，微信推廣