CSS Container Queries 完整教學：元件級響應式設計的革命

媒體查詢的困境

做響應式設計很多年的開發者都有同樣的痛苦：你設計了一個卡片元件，在 1200px 的螢幕上看起來很棒，但當你把同一個元件放進側邊欄時，它突然變得很擠、很醜。問題在哪？媒體查詢（@media）是根據視窗寬度決定樣式，而不是根據元件實際佔據的空間。

這就是 CSS Container Queries 要解決的問題。它讓你可以說：「當這個元件的容器寬度小於 400px 時，用這個樣式；當容器寬度大於 600px 時，用另一個樣式。」這是真正以元件為中心的響應式設計。

Container Queries 已於 2023 年在所有主流瀏覽器全面支援（Chrome 105+、Firefox 110+、Safari 16+），是目前最重要的 CSS 新特性之一。

Container Queries 基礎語法

要使用 Container Queries，需要兩個步驟：先定義一個「容器」，然後在容器的子元素上使用 @container 規則。

/* 步驟一：定義容器 */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 步驟二：根據容器大小調整子元素樣式 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

container-type 告訴瀏覽器這個元素是一個「容器」，container-name 給它一個名字方便引用。@container 規則跟 @media 語法很像，但針對容器的尺寸而非視窗尺寸。

Size Queries vs Style Queries

Size Queries（尺寸查詢）

最常用的類型，根據容器的尺寸（寬度、高度、長寬比）調整樣式。支援 min-width、max-width、min-height、max-height、aspect-ratio 等條件。

Style Queries（樣式查詢）

這是 2024 年才開始逐漸支援的新功能，根據容器的 CSS 自定義屬性值調整子元素樣式：

.product-card {
  container-type: style;
  --card-theme: featured;
}

@container style(--card-theme: featured) {
  .card-badge {
    display: block;
    background: gold;
  }
}

Style Queries 讓你可以透過父元素的 CSS 變數來「傳遞主題」給子元素，不需要額外的 class 或 JavaScript。目前 Chrome 111+ 支援，Firefox 和 Safari 也在實作中。

Containment 類型詳解

container-type 有三個值：

• inline-size：只追蹤行內方向（通常是水平寬度）的尺寸。這是最常用的值，效能最好。
• size：同時追蹤寬度和高度。使用這個值時，容器的高度必須由父元素決定，不能由內容決定（否則會有循環依賴的問題）。
• normal：不進行尺寸追蹤，但仍可用於 Style Queries。

簡寫屬性 container 可以同時設定 type 和 name：

.sidebar {
  container: sidebar / inline-size;
}

實戰設計模式

自適應卡片元件

這是 Container Queries 最典型的應用場景。同一個卡片元件，在寬容器中顯示為橫向佈局（圖片在左，文字在右），在窄容器中顯示為直向佈局（圖片在上，文字在下）：

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

.card { display: flex; flex-direction: column; }

@container (min-width: 500px) {
  .card { flex-direction: row; }
  .card-image { width: 40%; }
}

自適應導航列

導航列在大容器中顯示完整連結，在小容器中收合成漢堡選單。用 Container Queries 就能讓同一個導航元件在不同位置自動適應，不需要為每個位置寫不同的 CSS。

自適應側邊欄

側邊欄的小工具（天氣、最新文章、廣告等）在側邊欄中垂直排列，但如果用在頁面底部的橫向區塊中，就改為水平排列。

這些模式與 CSS Anchor Positioning 教學 中的定位技巧結合，可以打造出更靈活的元件系統，讓 tooltip 和 dropdown 也能根據容器位置自動調整方向。

容器查詢單位

配合 Container Queries，CSS 還引入了一組新的相對單位，相對於容器尺寸而非視窗尺寸：

• cqw：容器寬度的 1%
• cqh：容器高度的 1%
• cqi：容器行內方向尺寸的 1%（通常等同 cqw）
• cqb：容器塊狀方向尺寸的 1%（通常等同 cqh）
• cqmin / cqmax：容器 cqi 和 cqb 中的較小值/較大值

這些單位讓你可以寫出真正「比例響應」的設計：

@container (min-width: 400px) {
  .card-title {
    font-size: clamp(1rem, 3cqi, 2rem);
  }
}

這段程式碼讓標題字體大小隨容器寬度等比縮放，但限制在 1rem 到 2rem 之間。

瀏覽器支援與漸進增強

Size Queries 的瀏覽器支援已經非常好：Chrome 105+（2022 年 8 月）、Firefox 110+（2023 年 2 月）、Safari 16+（2022 年 9 月）。全球支援率超過 90%，可以放心在生產環境使用。

漸進增強策略：先寫沒有 Container Queries 的基礎樣式（通常是垂直堆疊的單欄佈局），再用 @container 覆蓋為更複雜的佈局。不支援 Container Queries 的舊瀏覽器就顯示基礎版本，不會有功能問題。

也可以配合 View Transitions API 使用，當元件在不同容器間切換佈局時，加入平滑的過渡動畫，提升使用者體驗。

從媒體查詢遷移到容器查詢

不需要一次全部換掉，可以漸進遷移。識別那些「在不同位置有不同外觀」的元件，優先用 Container Queries 重構。頁面級的佈局（例如決定是否顯示側邊欄）繼續用媒體查詢，因為這確實是根據視窗大小決定的。

Container Queries 搭配 CSS Subgrid 巢狀排版 可以解決很多複雜的排版問題。例如在網格佈局中，每個格子的內容元件可以用 Container Queries 自適應，同時用 Subgrid 讓格子內的元素對齊父網格，打造出真正靈活又整齊的介面。

Container Queries 代表了 CSS 響應式設計理念的根本轉變：從「根據裝置調整設計」到「根據元件所在的空間調整設計」。這讓元件真正具備了可移植性——同一個元件放在任何地方都能正確顯示。對於組件庫的作者來說，這是一個革命性的改變，不再需要為每個使用場景提供不同版本的元件。