Day 4｜RWD 認識：響應式設計的基本觀念與常見技巧
在開始正式實作之前，今天想深入整理一下前端開發中非常重要的概念——RWD (Responsive Web Design)，也就是響應式網頁設計。
現在的網站已經不再只服務單一螢幕尺寸，使用者可能透過手機、平板、筆電，甚至是超寬螢幕來瀏覽內容。如果網頁在不同裝置上跑版或文字太小，使用者體驗就會大打折扣。
因此，學會 RWD 幾乎可以說是前端工程師的必備技能。
RWD的核心概念
一個網站，多個裝置
RWD 的目標是「同一套程式碼，在不同螢幕大小都能自適應」。
這代表不需要針對手機、平板、桌機分別開發不同版本，而是透過 CSS 讓版面自動調整。
彈性版面（Fluid Grid）
傳統的切版習慣用固定像素，例如 width: 1200px。
但在 RWD 中，更多時候會使用百分比 % 或彈性單位（如 fr、auto），讓元素可以根據螢幕寬度自由伸縮。
彈性媒體（Flexible Media)
圖片和影片也必須跟著容器縮放，否則在手機上會超出版面。
例如在 CSS 中加入：
img {
max-width: 100%;
height: auto;
}
就能避免圖片在窄螢幕上爆版。
媒體查詢（Media Query）
這是 RWD 的靈魂技術。
透過媒體查詢，可以根據螢幕寬度套用不同樣式，例如：
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
這段程式碼代表當螢幕寬度小於 768px（平板或手機）時，字體大小會縮小。
常見的 RWD 技巧
設定 viewport
在 <head> 加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這行是讓手機瀏覽器正確縮放網頁的關鍵，幾乎是 RWD 的標配。
彈性單位%：相對父容器的百分比vw、vh：相對於視窗寬度/高度rem：相對於根字體大小，方便統一調整minmax()：在 CSS Grid 中設定最小與最大寬度，例如 minmax(200px, 1fr)
Mobile First 開發思維
先針對手機尺寸撰寫基本樣式，接著用媒體查詢逐步「放大」到平板、桌機。
這種做法可以減少覆寫 CSS 的次數，也比較符合現在以手機為主的使用習慣。
Flexbox 與 CSS Grid兩者都是現代切版的利器。
Flexbox適合一維排列（例如水平置中或垂直置中）。
CSS Grid適合二維排版（像是圖文交錯的區塊）。
善用這兩個工具，可以大幅減少寫複雜 CSS 的痛苦。
RWD 實際應用的思考
以我正在製作的小遊戲網站為例，遊戲介面可能包含按鈕、分數區塊與遊戲畫面：
在桌機上，這些元件可以並排呈現，提供更寬的視覺效果。
在手機上，則應自動改為垂直排列，確保按鈕不會太小，也不需要橫向捲動。
這些調整完全可以透過 CSS 完成，真正實現「一次開發，到處適應」。
響應式設計不只是調整版面，而是一種使用者體驗的保證。
掌握彈性網格、彈性媒體、媒體查詢
這三大核心，加上 Mobile First 思維，就能打造出在任何螢幕上都能完美呈現的網站。
接下來的挑戰，我會將這些技巧應用在小遊戲的介面設計中，確保不管玩家使用手機還是電腦，都能流暢遊玩，畫面既美觀又舒適。這也是我覺得前端最有魅力的地方：同樣一份程式碼，就能帶來無限的使用體驗！ 🎮📱💻
iThome鐵人賽
看影片追技術