CSS ContainerQueries Container

用 CSS 實現元件響應式布局：@container 解析

Rene Wu 2025/10/22 15:00:00

0 497

@container 是什麼？

以往我們經常使用 @media 依據「整個視窗的大小」來調整版面。但隨著元件化設計盛行，我們開始需要「依照容器大小」來做響應式的調整。

這時 @container 的出現，它可以根據某個容器的大小、條件，動態的調整內部元素樣式，從而實現真正模組化、可覆用的設計系統。

基本運作原理

先將某個元素定義為「容器」(container) → 使用 container-type 啟用監聽
透過 @container 根據容器的大小變化來套用不同的樣式
查詢只會影響該容器的後代元素

@container 的影響範圍 = 「擁有 container-type 的元素」的內部世界

容器和內容的層級關係

用以下範例來說明容器與被查詢內容的結構關係：

<div class="section">
  <div class="card-grid">
    <div class="card">A</div>
    <div class="card">B</div>
    <div class="card">C</div>
  </div>
</div>

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  container-type: inline-size;
  container-name: gridArea;
}

/* 容器寬度小於 400px，調整卡片樣式 */
@container gridArea (max-width: 400px) {
  .card {
    font-size: 14px;
  }
}

層級示意圖

<body>
 └── <div class="section">                  ← 普通區塊 (非容器)
       └── <div class="card-grid">          ← ✅ 容器  (container-type)
             ├── <div class="card">A</div>  ← 被查詢元素
             ├── <div class="card">B</div>
             └── <div class="card">C</div>

查詢生效條件：

.card-grid 定義了 container-type: inline-size
.card 是 .card-grid 的後代 → 可以被 @container 影響
若 .card 不在 .card-grid 裡，就不會被查詢到

命名容器與最近容器優先原則

容器查詢會依循「最近容器優先原則」，也就是元素會優先監聽最近一層具有 container-type 的父層。

若畫面中有多個容器、或巢狀結構複雜時候，則可以透過 container-name 來明確的指定監聽對象。這讓每個模組的樣式更加獨立，避免被外層布局所影響，行為也更可以預期。

容器查詢不會跨界

容器查詢與 @media 最大的差別是在作用範圍：

	@media	@container
對象	視窗大小	容器大小
作用範圍	全域	區域 (容器內部)
套用元素	所有示素	容器的後代元素
巢狀支援	無限制	依層級生效