在前一天我們聊到 RWD 響應式設計，它的重點是讓同一個網站在手機、平板、電腦上都能正常顯示，提供舒適的瀏覽體驗。那麼要做到這一點，除了版面結構本身要有彈性之外，我們還需要更細緻的控制方式，來告訴瀏覽器「當螢幕寬度到達某個範圍時，樣式應該怎麼變」。這就是 Media Query（媒體查詢） 的角色，它是 RWD 的核心工具之一，能根據螢幕大小、解析度甚至方向，來切換不同的 CSS。今天就讓我們更深入，看看 Media Query 如何讓網頁真正做到「隨螢幕改變樣式」

流體排版（Fluid Layout）

網頁如果只用固定的 px，遇到不同螢幕大小就會跑版。這時候可以改用「百分比」或「自動調整」：
• width: 80%; → 區塊寬度佔螢幕 80%，不管螢幕多大都會跟著縮放。
• max-width: 1200px; → 最大不要超過 1200px，避免在大螢幕上太寬。
• min-width: 300px; → 最小保持 300px，不會縮到看不清楚。
• margin: auto; → 常用來自動置中。
還有 vw / vh 這種單位：
• 1vw = 視窗寬度的 1%
• 1vh = 視窗高度的 1%
例如 font-size: 5vw; → 文字大小會隨著螢幕寬度縮放。

彈性圖片與影片（Responsive Images & Media）

圖片跟影片在不同裝置上常會「爆版」，解決方式：
• img { max-width: 100%; height: auto; } → 圖片不會超出容器，保持比例縮放。
• video 也可以加上同樣的設定。

🔹 排版單位進階：em / rem / vw / vh
除了 px，我們還常用這些：
• em：相對父層字體大小，例如父層字體 16px，2em = 32px。
• rem：相對整個網頁根字體（通常是 html 設定的大小），不會受父層影響，比較穩定。
• vw / vh：跟視窗有關，前面提過，常用來做隨螢幕縮放的字體或區塊。
小技巧：
• 字體大小用 rem → 穩定一致。
• 區塊寬高用 % + max-width/min-width → 有彈性又不失控。
• 特效或背景用 vw/vh → 隨螢幕比例更自然。

學習心得
到這裡，我覺得 RWD 真的不是光靠一個設定就能搞定的，而是很多小技巧一起組合起來。像流體排版讓區塊能跟著螢幕縮放，圖片和影片的彈性處理避免「爆版」，再加上 Media Query 來針對不同裝置做微調，整個網站就能在各種螢幕下都保持好看又好用。