跳轉到

建立 2025-02-25 更新 2026-09-11

響應式設計與媒體查詢（Responsive & Media Query）

RWD 不是「做三套網站」，而是同一份 HTML，用彈性版面加上條件式 CSS 去適應不同視口。優先順序通常是：相對單位 → Flex / Grid → 再寫 @media 修例外。

@media 語法

@media (width <= 40rem) {
  .sidebar { display: none; }
}

較新的範圍語法 (width <= 40rem) 比 max-width: 40rem 好讀。舊瀏覽器可用：

@media (max-width: 40rem) { /* ... */ }

常見條件

條件 用途
width / min-width / max-width 視口寬
height 短視窗（橫向手機）
orientation: portrait \| landscape 直橫
hover: hover 真正有滑鼠懸停
pointer: fine \| coarse 滑鼠 vs 手指
prefers-color-scheme: dark 系統深色模式
prefers-reduced-motion: reduce 減少動畫

可組合：@media (width >= 60rem) and (hover: hover)。

Mobile-first

預設寫小螢幕，再用 min-width 往上加欄位。這樣手機不必下載一堆再覆寫。

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (width >= 40rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (width >= 70rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

斷點用 rem 可隨使用者字級縮放，比死守 768px 友善。

不要為裝置命名死斷點

「iPad 寬度」每年都在變。依設計自己撐破的寬度下斷點：側欄放不下、表格太擠、標題斷成奇怪兩行時再加。

圖片與字級

img, video { max-width: 100%; height: auto; }

html { font-size: 100%; }
h1 { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); }

viewport meta 必須存在，否則手機會當成寬桌機再縮小：

<meta name="viewport" content="width=device-width, initial-scale=1">

容器查詢（Container Query）

媒體查詢看的是視口；元件放在側欄或主欄寬度不同時，更適合看容器：

.card-list { container-type: inline-size; }

@container (min-width: 28rem) {
  .card {
    display: grid;
    grid-template-columns: 8rem 1fr;
  }
}

卡片元件自己決定何時改成「左圖右文」，不管頁面是 3 欄還是 1 欄。

深色模式與減少動態

:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #f2f2f2;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

總結

  1. 先彈性佈局，再媒體查詢。
  2. Mobile-first + min-width + rem 斷點。
  3. 元件級變化優先 container query。
  4. 尊重 prefers-reduced-motion 與對比。

視覺動態接著看 變形 與 過渡。