何謂RWD/自適應網頁設計/響應式網頁設計?
自適應網頁設計（英語：Responsive web design，通常縮寫為RWD）是一種網頁設計的技術做法，該設計可使網站在多種瀏覽裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。
響應式網頁設計（RWD）的元素
採用 RWD 設計的網站使用CSS3 Media queries，即一種對 @media 規則的擴充功能，以及串流的基於比例的網格和自適應大小的影像以適應不同大小的裝置：
- Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則，最常用的是瀏覽器的寬度。
- 串流網格概念要求頁面元素使用相對單位如百分比或 字型排印學 調整大小，而不是絕對的單位如像素或點。
- 靈活的影像也以相對單位調整大小（最大到 100%），以防止它們顯示在包含它們的元素外面。
相關概念
移動優先，不引人注目的 JavaScript 和漸進增強
- 「移動優先」和「Unobtrusive JavaScript」/「漸進增強」（考慮一種新的網站設計時的策略）是先於 RWD 的相關概念: 基礎的手機瀏覽器不理解 JavaScript 或者 media queries，因此建議的做法是建立一個只有基本框架的網站，然後再為智慧型手機和 PC 提供增強功能；而不是試著「優雅降級」——讓一個複雜的，影像豐富的站點工作在最基本的行動電話上。
基於瀏覽器，特性或裝置探測的漸進增強
- 在一個網站必須支援缺乏 JavaScript 的基本的行動裝置的情況下，瀏覽器 (使用者代理) 探測 (也叫做「瀏覽器嗅探」)，和行動裝置探測是推斷某些 HTML 和 CSS 特性是否受支援的兩種方式 (作為漸進增強的基礎)—然而，這些方法不完全可靠。對於能力更強的行動電話和 PC，可以直接測試瀏覽器對 HTML/CSS 功能的支援 (識別裝置或者使用者代理字串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile等流行起來。Polyfills可以被用於添加對一些功能的支援—比如，支援 media queries (RWD 所需要的)，和在 (舊版本) Internet Explorer 上提高 HTML 5 支援。功能探測在較舊的瀏覽器上也可能不完全可靠: 某些也許會報告一個特性可用，然而它或者是缺失，或者是實作的如此拙劣以至實質上無法工作。
挑戰和其它辦法
Luke Wroblewski 總結出了 RWD 和移動設計中的一些挑戰，還建立了一個多裝置布局模式的目錄。他提議，比起單純的 RWD 手段，Device Experience 或者 RESS (透過伺服器端元件的響應式網頁設計, Responsive Web Design with Server Side Components) 等方法可以提供對行動裝置更加最佳化的使用者體驗。樣式表語言如Sass的伺服器端「動態 CSS」實作可以是這種做法的一部分。
RWD 的一個問題是橫幅廣告和視訊不是串流的。然而搜尋廣告和 (橫幅) 顯示廣告支援特定的裝置平台標的，和為桌面，智慧型手機和基本的行動裝置提供不同的廣告尺寸格式。可以為不同平台使用不同的著陸頁URL，或者可以用 AJAX 顯示一個頁面上的不同廣告變體。
歷史
Ethan Marcotte 在他在 A List Apart 的文章中發明了術語 Responsive Web Design (RWD)。他在他 2011 年關於這個主題所寫的簡短的書中描述了響應式網頁設計的理論和實踐。響應式設計被 .net 雜誌 列為 2012 年頂級網頁設計趨勢的第二名 (漸進增強是第一名)。他們也列出了 Ethan Marcotte 最喜歡的響應式站點之中的 20 個。
資料來源
http://zh.wikipedia.org/