RWD 是什麼？響應式網頁 RWD 教學入門

內容目錄

響應式網頁設計 (Responsive Web Design，縮寫為 RWD) 是一種網頁設計的方法，目的是讓網站能夠適應各種不同大小的螢幕，從桌面電腦到平板，甚至手機，都能提供最優的瀏覽體驗。

在這個日益移動化的時代，人們使用各種裝置瀏覽網頁的情況越來越常見。RWD 的出現，就是為了解決這種多裝置瀏覽的挑戰，而其主要的實踐方法是利用 CSS3 的媒體查詢 (Media Queries) 功能，根據裝置的螢幕大小來調整網頁的排版、尺寸以及其他元素。

本文將嘗試用簡單的方式，重新整理各種 RWD 相關的資訊，由淺入深來介紹 RWD。

點我免費領取全端開發學習地圖！

RWD 基本概念

RWD（Responsive Web Design）中文翻作「響應式網站設計」，是一種為了讓網頁在各種尺寸的裝置下，畫面都能呈現合適比例的設計原則。

有一種更容易理解 RWD 概念的比喻是「內容就像水」。

當你在設計網站排版時，能根據 RWD 的設計原則實作，網站內容就會像水一般，在各種裝置中自然的流動成最適當的樣子。

上圖以 Medium 為例，當你試著調整視窗寬度時，會發現網頁內容隨著寬度變小而變換版面，我們就可以說這個網站符合 RWD 的設計原則。

為什麼要用 RWD

近幾年隨著行動網路的取得越來越方便，更多的使用者開始使用各種不同裝置來上網。

許多網站因應這樣的趨勢將服務面向使用手持裝置的使用者，除了將網站服務另外開發成手機 APP、使用行動版網站（像是 Facebook 手機版）等，但這些方法都需要較大的成本去維護。

而 RWD 這樣單純使用 CSS 媒體查詢控制版面的設計方式，不管什麼裝置都在同一個網站上開發，在維護及成本的考量上就具有相對大的優勢，且在分享、搜尋排名上也都比一般行動版網站來得好。

RWD 基本實作方法

要將網頁使用 RWD 實作有以下幾步設定與做法：

設定 viewport
決定 RWD 設計模式
套用 CSS media query
使用相對單位設定寬高、大小

1. 設定 viewport

viewport（檢視區）指的就是瀏覽網頁時瀏覽器顯示畫面內容的區域。

而在針對要實作 RWD 的網頁中，HTML 的 head 部分必須設定 viewport，舉例像是：

CODE: https://gist.github.com/DezChuang/96aead3ed2802e25a65dba99817dd66a.js

這個設定可指示瀏覽器如何控制網頁的大小和縮放。

2. 決定 RWD 設計模式

再來最重要的一步，就是要決定網頁內容在不同 viewport 下的版面如何配置、流動。

在 RWD 中有五種比較常用的設計模式：局部流動 (mostly fluid)、欄內容下排 (column drop)、版面配置位移 (layout shifter)、細微調整 (tiny tweaks) 和畫布外空間利用 (off canvas)。

下一個段落會針對其中幾種設計模式做深入介紹。

3. 套用 CSS media query

我們都知道版面配置主要是 CSS 的工作，所以在 RWD 中為了要在不同螢幕寬度做不同的 CSS 樣式調整，就需要使用 CSS3 中提供的 media query 語法。

media query 基本的寫法舉例如下。例如我們要針對「螢幕尺寸在 600px 以上時，對 設定字體大小為 20px 」：

CODE: https://gist.github.com/DezChuang/a0f34d30950cde9f62867479ed3dbca8.js

這邊的 min-width: 600px 就是我們的篩選條件，所有在「螢幕尺寸 600px 以上」的 CSS 內容都可以寫在這個 scope 中。因此我們可以使用 media query 的寫法，順利的達到在各種尺寸下設定我們期待的樣式，不論是圖片大小、字體大小、容器寬高等。

4. 使用相對單位設定寬高、大小

最後要注意在不同尺寸的 CSS media query 中，內容的寬高、大小，大多會使用「相對單位」來設定，像是 width: 50%、width: 100vh、height: 80vh、font-size: 2em 等，如此才能在該範圍的 viewport 中達到 RWD 的效果。

RWD 設計模式

上面提到的 RWD 設計模式，以下針對 mostly fluid、column drop 這兩種最常見的設計模式做基本介紹：

局部流動（mostly fluid）

mostly fluid 在小尺寸螢幕時，內容會以垂直堆疊的方式排列；隨著螢幕尺寸變大時，內容會流動成多欄的方式，直到達到某個尺寸後，將內容置中並停止流動。

這裡提供 CodePen 範例 demo，其中 media query 的設定如下：

CODE: https://gist.github.com/DezChuang/b58e333347c0da4ad553fff9a2b6a615.js

欄內容下排（column drop）

column drop 在大尺寸時會以多欄版面配置，隨著視窗寬度變窄時，內容會垂直堆疊所有欄。

這裡提供 CodePen 範例 demo，其中 media query 的設定如下：

CODE: https://gist.github.com/DezChuang/bd2a4ad264d08af275149ff56f2598cb.js

RWD 實作工具

最後再簡列出現今實作 RWD 開發時，幾個常用的佈局系統與框架，這些工具都可以加速 RWD 的開發效率：

Flexbox
Grid
使用 CSS 框架實作 RWD，例如 Bootstrap

Bootstrap 是什麼？給網頁設計新手的Bootstrap 4入門教學

RWD的優勢與挑戰：提升使用者體驗和SEO

提升使用者體驗：RWD的核心就在於提供一致的使用者體驗，無論使用者使用何種裝置瀏覽，都能得到最佳的顯示效果。
提升SEO效果：Google等搜尋引擎會給予響應式設計的網站更高的排名，因此RWD有助於提高網站的SEO。
減少維護工作：相較於分別為不同裝置開發專用網站，響應式網頁僅需維護一套設計，可以大大減輕維護的工作量。
更高的可訪問性：由於RWD可適應所有裝置，因此可使網站達到更高的可訪問性。

RWD的挑戰

設計與開發難度提高：設計和開發一個可以在各種裝置上良好顯示的網頁，需要熟練掌握相關技術和設計理念，這對開發團隊的技術要求相對較高。
性能問題：響應式網頁必須為所有裝置提供相同的內容，這可能會導致在移動裝置上瀏覽時網頁載入速度較慢。
測試挑戰：由於必須確保網站在各種裝置上都能正常運作，這對於測試工作提出了更高的要求。
內容策略：在設計響應式網頁時，必須思考如何以最佳的方式呈現內容，以達到最佳的使用者體驗，這需要有良好的內容策略。

結語

隨著使用手持裝置上網已經是瀏覽網站的趨勢，RWD 可以說是學習網頁前端切版時一個不可或缺的技能。

本文簡要的介紹關於 RWD 的基本概念、重要性、實作方法、設計模式、實作工具，期待能帶給對 RWD 尚不太熟悉的開發者一些啟發，進而去利用 RWD 這個概念去開發網頁，提供更好的設計與體驗給使用者。

參考資料

常用的 RWD 工具：

1. Bootstrap：Bootstrap 是一個 HTML、CSS 和 JavaScript 框架，可以用來快速開發響應式網站和應用程式。它提供了許多預先設置的樣式和元件，可以讓開發者輕鬆地建立美觀且適應不同設備的網站。

2. Foundation：Foundation 是一個類似 Bootstrap 的前端框架，同樣可以用來開發響應式網站和應用程式。它提供了許多預先設置的樣式和元件，同時也支援 Sass 和 JavaScript 擴充。

3. Gridset：Gridset 是一個網格系統工具，可以讓開發者輕鬆地為不同設備設置網格系統。它提供了許多預先設置的網格系統，也可以自定義網格系統。

4. Flexbox Grid：Flexbox Grid 是一個基於 Flexbox 的網格系統，可以讓開發者輕鬆地為不同設備設置網格系統。它提供了許多預先設置的網格系統，同時也支援 Sass。

5. Sizzy：Sizzy 是一個瀏覽器模擬器工具，可以同時顯示網站在不同設備上的效果。它支援 iOS、Android、macOS 和 Windows 等設備，讓開發者可以快速檢查網站的響應式設計效果。

6. Gulp 和 Grunt：Gulp 和 Grunt 是兩個 JavaScript 任務自動化工具，可以幫助開發者自動化編譯、壓縮和優化前端資源，同時也支援 Sass、Less 和 CoffeeScript 等預處理器。

‍