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

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

1、響應式設計（Responsive Web Design）

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

一般來(lái)說(shuō)，響應式設計（RWD） 傾向于只改變元素的外觀(guān)布局，而不大幅度改變內容。

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

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

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

03

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

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

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

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

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

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

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

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

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

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

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

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

3、跨平臺：在手機、pad、電腦上都有不俗的表現。

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

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

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

關(guān)系：

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

適合的場(chǎng)景：

響應式設計不適合于大型門(mén)戶(hù)或電商網(wǎng)站，因為其基本原則是不會(huì )因為設備不同而給予用戶(hù)不同的內容（比如在低分辨率的設備上刪減某些內容），所以一般大型門(mén)戶(hù)或電商網(wǎng)站都會(huì )提供一個(gè)移動(dòng)版設備的網(wǎng)站，或者只能縮放查看

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

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

小結一下：

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

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

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