Responsive Web Design (RWD) 和 Adaptive Web Design (AWD)
https://www.xenyo.com/blog/responsive-web-design-rwd-he-adaptive-web-design-awd
共同點：
RWD和AWD的出現都是由於移動上網設備日益普及，針對不同設備(尤其考慮不同屏幕尺寸)及其使用條件(通常有比較低的頻寬，流量和性能等) 對網頁作出優化，以帶來更好的用戶體驗。
RWD：
起源：
Ethan Marcotte 在他的 A List Apart 的文章中發明了術語 Responsive Web Design (RWD)。
概念：
Wikipedia的定義：「自適應網頁設計（英語：Responsive web design，通常縮寫為RWD）是一種網頁設計的技術做法，該設計可使網站在多種瀏覽裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。」
具體來說RWD是在客戶端偵測屏幕尺寸和尺寸的改變(比如手機從垂直顯示變成橫向)來改變頁面佈局和外觀，配合如流體佈局和可以自適應的圖片/視頻等技術，使頁面只需同一套程式碼，就能夠適應不同屏幕尺寸的技術。
特性：
1. 選擇性加載CSS和流體佈局
流體佈局是多年前已經流行的技術，指頁面佈局會隨著瀏覽器尺寸改變而變化，例如兩欄彈性佈局，一邊是固定寬度的邊欄，另一邊是彈性寬度，隨著瀏覽器尺寸改變而填充空間。
CSS3的新功能Media Queries，原理是制定不同斷點(Break point)，當屏幕尺寸符合某2個斷點之間的範圍，就使用特定的CSS來改變佈局，通常還會配合流體佈局使用，例如使用百分比定義元素寬度而不是固定寬度，提高頁面自適應性。
2. 自適應的圖像和視頻
以相對單位(%，em)調整多媒體大小。
3. 相對大小字體
同2，對字體不使用絕對單位(px，pt)，而使用相對單位(em)。
4. 頁面縮放控制
使用HTML的標籤，控制頁面在設備上的縮放初始值和被用戶縮放的上下限等。
5. JavaScript
除了CSS3的Media Queries，也會能使用JavaScript偵測屏幕尺寸變化，對頁面作出比CSS更大程度的調整。
6. 兼容性
有移動優先(Mobile first) 和漸進增強(Progressive enhancement) 2個概念： 移動優先是由於較基礎或較舊的瀏覽器不能使用Media Queries或JavaScript，因此比較好的做法是先做出通用的固定佈局框架，之後再為功能較強的瀏覽器提供增強功能。
漸進增強是使用某些偵測技術推斷瀏覽器是否支援個別功能，例如JavaScript的庫Modernizr。也會使用Polyfills來以非官方的技術為特定瀏覽器補充其所缺失的功能。
實例：
Moran Prizes
AWD：
概念：
“Adaptive Web Design"一詞最初由Aaron Gustafson著作的同名書籍提出，他認為除了使用RWD技術於客戶端控制頁面佈局外，也應該針對不同客戶設備來增減內容和外觀以提高適應性和用戶體驗。AWD可以在伺服端或客戶端以設備辨識技術來為不同設備提供不同內容，甚至是另一套程式碼，頁面或站點。
特性：
1. 伺服端辨識客戶設備使用伺服端的辨識，來決定執行什麼程式，例如決定是否轉址到行動設備的程式碼，這是許多網站經常使用的方式。
2. 客戶端辨識客戶設備Google所推薦的方式JavaScript-adaptive概念，使用相同的HTML/CSS/Javascript在各種不同的載具上，不同的載具會有不同的執行結果。
3. 不同版本的資源網站開發者會先準備好不同版本的內容和資源，根據辨識的結果來提供對應的版本。還能從不同伺服器的運行速度，或者域名的網絡速度等層面實現更大程度的優化。
實例：
John Hardy
比較：
簡單來說，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://www.xenyomedia.com/blog/134/responsive-web-design-rwd-%E5%92%8C-adaptive-web-design-awd
La Beaute 