在學習網頁前端開發時，不可避免地一定會常聽到 RWD 這個詞，可能隱約也講的出像是「什麼響應式的」、「一種網頁設計方式」、「手機也可以用的網頁」的概念，但仍舊有些一知半解。
本文將嘗試用簡單的方式，重新整理各種 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，舉例像是：
<p>CODE: https://gist.github.com/DezChuang/96aead3ed2802e25a65dba99817dd66a.js</p>
這個設定可指示瀏覽器如何控制網頁的大小和縮放。
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 以上時，對 <p> 設定字體大小為 20px 」：</p>
<p>CODE: https://gist.github.com/DezChuang/a0f34d30950cde9f62867479ed3dbca8.js</p>
這邊的 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 的設定如下：
<p>CODE: https://gist.github.com/DezChuang/b58e333347c0da4ad553fff9a2b6a615.js </p>
欄內容下排（column drop）
column drop 在大尺寸時會以多欄版面配置，隨著視窗寬度變窄時，內容會垂直堆疊所有欄。
這裡提供 CodePen 範例 demo，其中 media query 的設定如下：
<p>CODE: https://gist.github.com/DezChuang/bd2a4ad264d08af275149ff56f2598cb.js </p>
RWD 實作工具
最後再簡列出現今實作 RWD 開發時，幾個常用的佈局系統與框架，這些工具都可以加速 RWD 的開發效率：
- Flexbox
- Grid
- 使用 CSS 框架實作 RWD，例如 Bootstrap
Bootstrap 是什麼？給網頁設計新手的Bootstrap 4入門教學
結語
隨著使用手持裝置上網已經是瀏覽網站的趨勢，RWD 可以說是學習網頁前端切版時一個不可或缺的技能。
本文簡要的介紹關於 RWD 的基本概念、重要性、實作方法、設計模式、實作工具，期待能帶給對 RWD 尚不太熟悉的開發者一些啟發，進而去利用 RWD 這個概念去開發網頁，提供更好的設計與體驗給使用者。
參考資料
延伸閱讀
- Responsive Web Design: 50 Examples and Best Practices
- 學習 CSS 版面配置 – flexbox
- A Complete Guide to Flexbox
- 深入解析 CSS Flexbox
常用的 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 等預處理器。