前言

恭喜你已經學會了 RWD 的基礎知識與圖片、多媒體處理！本章將帶你進一步認識一些進階技巧，並提供實戰應用範例，讓你的網站更專業、更有彈性。

1. 更靈活的媒體查詢寫法

除了常見的 min-width、max-width，媒體查詢還能根據螢幕方向（橫/直）、解析度、色彩等條件做更細緻的調整。

範例：根據螢幕方向切換版型

@media (orientation: landscape) {
 /* 橫向時的樣式 */
}
@media (orientation: portrait) {
 /* 直向時的樣式 */
}

2. Viewport 單位與現代 CSSd

善用 vw、vh、vmin、vmax 等單位，讓排版更彈性。也可以搭配 CSS 變數（custom properties）與 calc() 運算，打造更動態的版型。

這些單位讓你的字體、間距、區塊寬高能隨螢幕自動調整，提升整體彈性。

h1 {
 font-size: 6vw;
}

3. Flexbox 與 Grid 的進階應用

• 巢狀（Nested）布局：多層彈性排版
• 自動填滿（auto-fit, auto-fill）：自動依螢幕寬度調整欄數
• gap 間距屬性：更簡單地控制元素間距

這些技巧可以讓你的版面在內容多寡、螢幕大小變化時都能自動調整，維持美觀。

.grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 gap: 24px;
}

4. 響應式表單設計

表單欄位在不同裝置上要能自動換行、拉寬，提升使用者體驗。

建議使用 Flexbox 或 Grid 來排版，讓表單在手機上也能好操作。

.form-row {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
}
.form-row > * {
 flex: 1 1 200px;
 min-width: 120px;
}

5. 實戰應用：打造完整響應式首頁

將前面學過的技巧整合，設計一個簡單的 RWD 首頁，包括 header、導覽列、主內容、側邊欄與 footer，並讓所有區塊都能在手機、平板、桌機上自動調整。

建議流程如下：

1. 先用語意標籤（header、nav、main、aside、footer）規劃結構
2. 用 Flexbox 或 Grid 排版
3. 設定響應式圖片與多媒體
4. 加入媒體查詢調整細節
5. 測試不同螢幕寬度下的效果
   
   

6. RWD 開發的常見工具與資源

• 線上測試工具（如 Chrome DevTools 裝置模擬）
• CSS 框架（Bootstrap、Tailwind CSS 等）
• 圖片壓縮與格式轉換工具（如 Squoosh、TinyPNG）
• 免費圖庫與 icon 資源（如 Unsplash、Font Awesome）

結論

RWD 不只是技術，更是一種「以使用者為中心」的設計思維。 只要持續練習、善用工具，並多觀摩優秀網站，你也能打造出各種裝置都好用又美觀的網站！