Container Queries 實戰：元件級響應式設計

響應式設計從 2010 年到現在，經歷了一個根本的限制：Media Queries 響應的是 viewport（視口），而不是元件本身。一個 .card 元件在窄的 viewport 是單列，在寬的 viewport 是多列——但現實中，這個元件可能被放在側邊欄（窄）或主內容區（寬），viewport 的寬度跟它沒有關係。Container Queries 解決了這個問題，讓元件可以響應「自己的容器」的尺寸，而不是整個頁面。2026 年，Container Queries 不只是基礎語法，還支援了 Scroll-queries 和 Style Queries，讓響應式設計進入了一個新的層次。

---

為什麼 Container Queries 是遊戲改變者

Media Queries 的根本限制

/* Media Query：響應的是 viewport */
@media (min-width: 768px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

問題來了：.card 元件被放在側邊欄時（假設側邊欄 250px 寬），viewport > 768px，但 .card 的可用寬度只有 250px，grid 布局會導致內容被壓縮。

Container Query 的解決方案

/* 定義容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 響應容器的寬度，不是 viewport */
@container card (width >= 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container card (width >= 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

現在 .card 元件的布局，取決於它所在容器的寬度，而不是整個頁面的 viewport。

---

基礎語法

定義容器

/* 方式 1：container-type */
.card-container {
  container-type: inline-size;  /* 只追蹤 inline 方向的尺寸（寬度）*/
}

/* 方式 2：container shorthand */
.card-container {
  container: card / inline-size;  /* 名稱 / 類型 */
  /* container-name: card; */
  /* container-type: inline-size; */
}

查詢容器

/* 基本語法 */
@container <name> (condition) {
  /* styles */
}

/* 沒有指定名稱時，查詢最近祖先容器 */
@container (width >= 400px) {
  .card {
    /* ... */
  }
}

/* 指定容器名稱 */
@container card (width >= 400px) {
  .card {
    /* ... */
  }
}

---

Scroll-queries：根據滾動位置響應

2025 年底，Chrome、Edge、Opera 支援了 Scroll-queries——讓元件根據「容器內滾動位置」來改變樣式。

使用場景

• 當內容滾動到底部時，載入更多
• 側邊欄在滾動到特定位置時改變樣式
• Floating action button 在滾動時隱藏

語法

/* 根據容器的滾動狀態來響應 */
.sidebar {
  container-type: scroll-state;
  container-name: sidebar;
}

/* 當 sidebar 容器被滾動時 */
@container sidebar (scroll-state(scrolled)) {
  .sidebar-item {
    opacity: 0.7;
  }
}

/* 滾動到頂部 */
@container sidebar (scroll-state(scrolled-to-bottom)) {
  .scroll-hint {
    display: none;
  }
}

實用範例：浮動按鈕

.fab-container {
  container-type: scroll-state;
  container-name: fab;
}

@container fab (scroll-state(scrolled)) {
  .fab {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
  }
}

@container fab (scroll-state(scrolled-to-top)) {
  .fab {
    transform: translateY(0);
    opacity: 1;
  }
}

---

Style Queries：根據容器樣式響應

Style Queries 讓元件根據「父容器的特定 CSS 屬性值」來改變樣式。這是 Container Queries 家族中最新的成員。

使用場景

• 父元素有某個 class 時，調整子元素樣式
• 主題切換（dark mode / light mode）
• 容器處於某個狀態時的響應

語法

/* 父容器定義了自訂屬性 */
.card-container {
  --variant: featured;
}

/* 子元件查詢父容器的樣式 */
@container style(--variant: featured) {
  .card {
    border: 2px solid gold;
    background: linear-gradient(135deg, #f5f5f5, #ffffff);
  }
}

@container style(--variant: compact) {
  .card {
    padding: 8px;
    font-size: 14px;
  }
}

實際應用：主題切換

.theme-container {
  container-type: style;
  container-name: theme;
}

/* 亮色主題 */
@container theme style(--theme: light) {
  .card {
    background: white;
    color: #333;
  }
}

/* 暗色主題 */
@container theme style(--theme: dark) {
  .card {
    background: #1a1a1a;
    color: #f0f0f0;
  }
}

---

Container Scoped CSS Variables

Container Queries 讓 CSS Variables 也有了「作用域」的概念——你可以定義只在某個容器內有效的變數。

.card-container {
  /* 在這個容器內有效的 CSS 變數 */
  --card-padding: 16px;
  --card-radius: 8px;
  --card-bg: white;
}

.card {
  padding: var(--card-padding);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}

/* 巢狀在 .featured-card 內時，覆蓋這些值 */
.featured-card-container {
  --card-padding: 24px;
  --card-bg: linear-gradient(135deg, #667eea, #764ba2);
  --card-radius: 16px;
}

這個功能減少了 60% 的 cascade 衝突——你不再需要用高優先級的選擇器來覆蓋樣式，只需要改變容器內的 CSS 變數值。

---

效能優勢

Container Queries 比 Media Queries 快 35%，這個數據來自以下原因：

操作	Media Query	Container Query
觸發時機	viewport 變化	容器尺寸變化
影響範圍	整個頁面	僅容器內的 DOM 子樹
重算成本	全頁面 re-layout	局部 re-layout
效能差距	基準	35% 快

當頁面有多個獨立的元件時，Container Queries 的效能優勢更加明顯：

<!-- 多個獨立的卡片元件 -->
<div class="grid">
  <div class="card-container">  <!-- 只有這個容器的變化需要重算 -->
    <div class="card">...</div>
  </div>
  <div class="card-container">  <!-- 其他容器不受影響 -->
    <div class="card">...</div>
  </div>
</div>

---

與其他 CSS 技術的搭配

Container Queries + Subgrid

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

@container card (width >= 500px) {
  .card-inner {
    display: grid;
    grid-template-columns: subgrid;  /* 與父 grid 對齊 */
  }
}

Container Queries + Cascade Layers

/* 用 @layer 控制優先級 */
@layer base, container, components;

@layer base {
  .card { /* 基本樣式 */ }
}

@layer container {
  @container card (width >= 400px) {
    .card { /* container query 樣式 */ }
  }
}

---

瀏覽器支援

功能	Chrome	Edge	Safari	Firefox
Container Queries（基礎）	105+	105+	16+	110+
Scroll-queries	129+	129+	❌	❌
Style Queries	111+	111+	❌	❌

對於需要支援 Safari 和 Firefox 的專案，基礎的 Container Queries 已經可以安心使用；Scroll-queries 和 Style Queries 需要 Progressive Enhancement 策略。

---

結語：響應式設計的新維度

Container Queries 將響應式設計從「頁面級」提升到了「元件級」。過去我們設計響應式系統時，思考的是「viewport 有多寬」；現在我們思考的是「這個元件有多少空間可用」。

35% 的效能優勢、Scroll-queries 和 Style Queries 的新增能力，讓 Container Queries 在 2026 年成為前端工程師必須掌握的核心技能。特別是當你維護一個元件庫時，Container Queries 讓每個元件都能真正做到「隨遇而安」——無論放在哪個容器裡，都能自動調整到最佳布局。

---

延伸閱讀

• CSS Grid 完整指南 — 進階布局技巧
• Interop 2026 瀏覽器大一統 — 瀏覽器相容性狀態

本文是「2026 CSS 實用技術」系列文章之一。