[轉載]Responsive Web Design (RWD) 和 Adaptive Web Design (AWD)

RWD和AWD的出現都是由於移動上網設備日益普及，針對不同設備(尤其考慮不同屏幕尺寸)及其使用條件(通常有比較低的頻寬，流量和性能等) 對網頁作出優化，以帶來更好的用戶體驗。

RWD：
Wikipedia的定義：「自適應網頁設計（英語：Responsive web design，通常縮寫為RWD）是一種網頁設計的技術做法，該設計可使網站在多種瀏覽裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。」
具體來說RWD是在客戶端偵測屏幕尺寸和尺寸的改變(比如手機從垂直顯示變成橫向)來改變頁面佈局和外觀，配合如流體佈局和可以自適應的圖片/視頻等技術，使頁面只需同一套程式碼，就能夠適應不同屏幕尺寸的技術。

AWD：
"Adaptive Web Design"一詞最初由Aaron Gustafson著作的同名書籍提出，他認為除了使用RWD技術於客戶端控制頁面佈局外，也應該針對不同客戶設備來增減內容和外觀以提高適應性和用戶體驗。AWD可以在伺服端或客戶端以設備辨識技術來為不同設備提供不同內容，甚至是另一套程式碼，頁面或站點。

比較：
簡單來說，RWD主要是依靠高彈性的佈局策略，使同一個頁面能適應不同設備的運行環境。AWD則是通過辨識客戶設備，提供針對該設備的不同版本的頁面內容和資源。
RWD和AWD有很多重疊的特性，甚至有人說RWD是AWD的一個子集。兩者沒有明顯的優缺點，支持RWD的說法認為不應該因為用戶使用移動設備就刪減內容或限制功能，應該公平對待。而支持AWD的說法則認為移動設備有不同於桌面設備的使用情況，包括網速，流量，性能等，應該針對其提供優化過的頁面，並批評RWD在移動設備上加載體積巨大的圖像，運行性能消耗大的腳本等。然而這些問題也有解決方法，對於圖像，可以利用CSS的層疊特性和Media Queries技術，先加載體積小版本的圖像，當頁面尺寸符合較大的斷點時才加載更大尺寸的版本。而性能方面也能通過JavaScript對頁面元素做更多調整來優化，例如於移動設備上(辨識客戶設備或偵測屏幕尺寸)不運行對性能要求高的腳本等。甚至也出現RESS(Responsive Web Design with Server Side Components，透過伺服器端元件的響應式網頁設計) 的概念，就是RWD和AWD同時配合使用，例如佈局具有RWD的良好彈性，也會用設備辨識技術，於某個斷點使用AJAX動態加載對應該設備的資源。

總結：
RWD和AWD兩者並沒有明確的實現標準和優缺點，都是以提高用戶體驗為目標，開發者應該根據不同情況，選擇該使用的技術，彈性處理。

其他資訊
http://meebox.blogspot.tw/2014/02/rwd-vs-awd-vs-fluid-web-layout.html
http://iki0723.blogspot.tw/2012/11/combining-responsive-and-adaptive.html