Knowledge / 知識觀點

01/08

關於響應式網頁設計(RWD)

響應式網頁設計（英語：Responsive web design，通常縮寫為RWD），又稱為自適應網頁設計、回應式網頁設計。是一種網頁設計的技術做法，該設計可使網站在多種瀏覽裝置（從桌面電腦顯示器到行動電話或其他行動產品裝置）上閱讀和導航，同時減少縮放、平移和捲動。

採用 RWD 設計的網站使用CSS3 Media queries，即一種對 @media 規則的擴充功能，以及串流的基於比例的網格和自適應大小的影像以適應不同大小的裝置：

Media queries允許網頁根據存取站點裝置的特點而使用不同 CSS 樣式規則，最常用的是瀏覽器的寬度。串流網格概念要求頁面元素使用相對單位如百分比或字型排印學調整大小，而不是絕對的單位如像素或點。靈活的影像也以相對單位調整大小（最大到 100%），以防止它們顯示在包含它們的元素外面。

在一個網站必須支援缺乏 JavaScript 的基本的行動裝置的情況下，瀏覽器 (用戶代理) 探測 (也叫做「瀏覽器嗅探」)，和行動裝置探測是推斷某些 HTML 和 CSS 特性是否受支援的兩種方式 (作為漸進增強的基礎)—然而，這些方法不完全可靠。

對於能力更強的行動電話和 PC，可以直接測試瀏覽器對 HTML/CSS 功能的支援 (識別裝置或者用戶代理字串) 的 JavaScript 框架如 Modernizr, jQuery 和 jQuery Mobile等流行起來。Polyfills可以被用於添加對一些功能的支援—比如，支援 media queries (RWD 所需要的)，和在 (舊版本) Internet Explorer 上提高 HTML 5 支援。功能探測在較舊的瀏覽器上也可能不完全可靠: 某些也許會報告一個特性可用，然而它或者是缺失，或者是實作的如此拙劣以至實質上無法工作。