響應式設計從媒體查詢走向容器查詢，是 CSS 發展歷程中的重要轉折點。2026 年，容器查詢的瀏覽器支援率已經超過 95%，在實際專案中的應用也越來越成熟。

從媒體查詢到容器查詢

傳統媒體查詢的問題在於它只能感知視埠尺寸，無法感知元件自身可用空間：

/* 媒體查詢：基於視埠 */
@media (min-width: 768px) {
  .card { display: grid; grid-template-columns: 200px 1fr; }
}

容器查詢解決了這個問題——讓元件根據自身容器的尺寸來調整佈局：

/* 容器查詢：基於父容器 */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

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

基礎語法詳解

容器類型

container-type 有三個值：

/* inline-size：只監聽水平尺寸（最常用） */
.sidebar { container-type: inline-size; }

/* size：同時監聽水平和垂直尺寸 */
.chart-container { container-type: size; }

命名容器

當頁面有多個容器時，命名容器可以避免查詢衝突：

.page-header { container-type: inline-size; container-name: header; }
.main-content { container-type: inline-size; container-name: content; }

@container header (min-width: 600px) {
  .nav-items { display: flex; gap: 1rem; }
}

實際應用模式

卡片元件響應式

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

/* 小容器：垂直佈局 */
@container (max-width: 399px) {
  .card { grid-template-columns: 1fr; }
}

/* 中等容器：水平佈局 */
@container (400px <= width <= 699px) {
  .card { grid-template-columns: 150px 1fr; }
}

/* 大容器：水平佈局，圖片更大 */
@container (min-width: 700px) {
  .card { grid-template-columns: 250px 1fr; }
}

導覽列響應式

.navbar {
  container-type: inline-size;
  container-name: nav;
}

/* 寬容器：完整導覽 */
@container nav (min-width: 768px) {
  .nav-toggle { display: none; }
}

/* 窄容器：漢堡選單 */
@container nav (max-width: 767px) {
  .nav-items { position: fixed; left: -100%; }
  .nav-items.open { left: 0; }
  .nav-toggle { display: block; }
}

效能優化

1. 避免過度巢狀：不要在已經很小的容器中再定義容器查詢
2. 合理選擇容器類型：大多數場景下 inline-size 就足夠了
3. 使用 contain 屬性：在容器元素上新增 contain: layout style 可以優化渲染效能

小結

容器查詢是 CSS 響應式設計的未來方向。它讓元件真正擁有了「自我感知」的能力，能夠根據自身可用空間而不是視埠尺寸來調整佈局。掌握容器查詢的關鍵是理解「元件驅動」的響應式思維——不再考慮「視埠有多寬」，而是考慮「這個元件有多少空間」。