RWD 響應式網頁設計：一套樣式適應所有裝置
響應式網頁設計 (Responsive Web Design，簡稱 RWD) 是一種網頁設計方法，讓網站能夠在不同尺寸的設備上都能提供良好的使用體驗。響應式網頁設計是指網頁能夠：
- 自動適應不同螢幕尺寸: 從手機到桌機都能正常顯示。
- 提供最佳使用體驗: 在任何設備上都易於瀏覽和操作。
- 一套樣式多種顯示: 不需要為不同設備製作不同版本。
測試工具
開發時靠瀏覽器內建的裝置模擬最快，但字型渲染、觸控手感與真實網速只有實機看得出來，上線前仍要實機確認。
| 工具 | 說明 |
|---|---|
| 瀏覽器開發者工具 | 內建的裝置模擬，切換尺寸與旋轉方向最方便。 |
| 線上模擬服務 | 一次預覽多種裝置尺寸，適合快速檢視。 |
| 實機測試 | 字型渲染、觸控手感與真實網速只有實機看得出來。 |
| 效能與無障礙檢測 | 補上模擬看不出來的載入速度與可用性問題。 |
詳細用法請見 測試工具 。
可視範圍
在檔頭用 <meta> 告訴瀏覽器可視區域有多大，排版、字級與縮放都受它影響。沒有設定時，行動瀏覽器會以桌機寬度渲染再整頁縮小，文字就小到看不清楚。
| 參數 | 說明 |
|---|---|
width=device-width | 以裝置的實際寬度渲染，這是最關鍵的一項。 |
initial-scale=1.0 | 初始縮放比例，維持一比一。 |
viewport-fit=cover | 延伸到全螢幕裝置的邊角，需搭配安全區域處理。 |
user-scalable、maximum-scale | 限制縮放，會影響無障礙，不建議關閉。 |
詳細用法請見 可視範圍 。
媒體查詢
依裝置的條件套用不同的樣式，是 RWD 調整版面的主要手段。行動優先的寫法以 min-width 逐步往上加樣式，比從桌機往下覆蓋乾淨許多。
| 寫法 | 說明 |
|---|---|
| 媒體類型 | screen、print 等，指定樣式套用在哪一種媒體。 |
min-width、max-width | 寬度條件，行動優先以 min-width 為主。 |
orientation、resolution | 螢幕方向與解析度的條件。 |
and、or、not | 邏輯運算子，用來組合多個條件。 |
prefers-color-scheme 等 | 偏好設定相關的查詢，例如：深色模式。 |
詳細用法請見 媒體查詢 。
最佳實踐
響應式做得好不好，取決於策略而不是語法。斷點該依內容決定：把視窗慢慢拉寬，版面開始不好看的地方才是該加斷點的地方。
| 實務重點 | 說明 |
|---|---|
| 行動優先 | 先寫小螢幕的樣式，再用放大條件逐步增強。 |
| 依內容設定斷點 | 版面撐不住的地方才加斷點，不照機型尺寸抄。 |
| 彈性容器與單位 | 用相對單位與彈性版面，不要寫死寬度。 |
| 響應式影像 | 依裝置提供合適尺寸，小螢幕不載入大圖。 |
| 觸控友善 | 加大可點擊區域與按鈕間距。 |
詳細用法請見 最佳實踐 。
三個基本條件
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">三者缺一，畫面在手機上就會不對。更完整的策略見 最佳實踐。
常見問題
RWD 和另外做一個手機版網站差在哪？
RWD 是同一份程式碼與同一個網址；另做手機版則是兩套內容與兩個網址，維護成本高，SEO 也要額外處理對應關係。
斷點該怎麼決定？
依內容決定，而不是照著特定機型的尺寸抄。把視窗慢慢拉寬，版面開始不好看的地方就是該加斷點的地方。
一定要行動優先嗎？
建議如此。先寫小螢幕的樣式，再用放大條件逐步增強，樣式會比從桌機往下覆蓋乾淨許多。
