RWD 響應式設計

讓網站在手機、平板、桌機都能正常閱讀與操作。

先用一句話理解

英文全名：Responsive Web Design

讓網站在手機、平板、桌機都能正常閱讀與操作。

打個比方

像同一份菜單在小卡片和大看板上都要看得清楚。

什麼時候會遇到

任何對外網站、工具頁、表單或後台介面。

再往深一點看

Responsive Design（響應式設計）讓同一份 HTML 和 CSS 根據瀏覽器的寬度自動調整版面，而不是針對不同裝置維護兩套程式碼。它的核心技術是 CSS 的 media query，讓你可以說「螢幕寬度小於 768px 時，導覽列改成漢堡選單、卡片改成單欄排列」。現代 CSS 框架如 Tailwind CSS 把這個概念內建成 sm:、md:、lg: 前綴，讓你在 HTML 就能直接設定不同寬度的樣式。Responsive design 和 accessibility 密切相關：手機版不只是縮小，還要讓觸控目標夠大（至少 44×44px）、字體夠清楚可讀，才算真正考慮到手機使用者的需求。

舉個例子

你的 Landing Page 在桌機顯示三欄特色介紹，手機上改成單欄、每欄圖片和文字上下排列、按鈕寬度撐滿全寬。在 Figma 設計時就準備桌機和手機兩份稿，交給工程師時用 Tailwind 的 responsive prefix 實作，部署到 Vercel 後用 Chrome DevTools 模擬各種裝置尺寸確認。

常見誤解

- 只用自己 15 吋筆電的瀏覽器確認過版面，沒有打開 Chrome DevTools 切換到手機模式測試，上線後才發現在 iPhone 上導覽列全爆版。
- 用固定像素寬度（如 width: 800px）寫版面，而不是用百分比或 max-width 加 padding，結果在小螢幕上內容超出邊界，出現橫向捲軸。
- 手機版只縮小了文字和圖片，忘記調整按鈕大小和間距，觸控目標太小，使用者用拇指很難精確點到，尤其是密排的連結清單。