CSS Container Queries 教學：響應式設計的新時代終於來了

做前端這麼多年，響應式設計一直有個讓我很煩的問題：Media Queries 看的是視窗寬度，不是元件所在容器的寬度。

什麼意思？想像一個卡片元件，放在主內容區時寬度 800px 長得很好看，但同一個元件放到 300px 的側邊欄就爆掉了。用 Media Queries 根本處理不了這個問題，因為視窗寬度沒變，變的是容器。

CSS Container Queries 就是來解決這個痛點的。如果你之前看過我寫的 CSS Grid 切版教學，搭配 Container Queries 會讓你的佈局能力再上一個層次。

Media Queries 的痛點

先來看一個經典場景。你做了一個漂亮的產品卡片，在 desktop 是水平排列，手機上變成垂直堆疊。但如果這個卡片同時出現在主內容區（寬度 70%）、側邊欄（寬度 30%）和彈出視窗（寬度 50%），三個地方的容器寬度不同，但 Media Query 只知道視窗是 1440px。你只能用各種 class name hack 或 JavaScript 來處理。

Container Queries 基本語法

Container Queries 的邏輯很簡單：先告訴瀏覽器「這個元素是一個容器」，然後子元素就可以根據容器的尺寸來調整樣式。

Step 1：定義容器

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

• container-type: inline-size 表示我們要查詢這個容器的水平寬度
• container-name 是可選的，但給容器命名可以讓查詢更精確

Step 2：寫容器查詢

@container card (min-width: 500px) {
  .product-card { display: flex; flex-direction: row; }
}
@container card (max-width: 499px) {
  .product-card { display: flex; flex-direction: column; }
}

就這樣！卡片會根據它所在容器的寬度來決定佈局，跟視窗大小完全無關。

三種容器查詢類型

1. 尺寸查詢（Size Queries）

最常用的類型，根據容器的寬度或高度來調整樣式。2026 年瀏覽器支援率超過 95%（Chrome 105+、Firefox 110+、Safari 16+）。

2. 樣式查詢（Style Queries）

根據容器的 CSS 自訂屬性值來調整樣式。目前只有 Chrome 和 Edge 支援。

@container style(--theme: dark) {
  .card { background: #1a1a1a; color: white; }
}

3. 捲動狀態查詢（Scroll-State Queries）

根據容器的捲動狀態來調整樣式，2025 年底開始在 Chrome 和 Edge 支援。比較新，用的人還不多。

實戰範例：響應式卡片

來看一個完整的實戰範例：

.grid-item { container-type: inline-size; }

.product-card {
  display: flex; flex-direction: column; gap: 1rem;
}
.product-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

@container (min-width: 400px) {
  .product-card { flex-direction: row; }
  .product-card img { width: 40%; }
}
@container (min-width: 700px) {
  .product-card { gap: 2rem; padding: 2rem; }
  .product-card .description { display: block; }
}

這個卡片放到任何寬度的容器裡都會自動調整，不需要額外的 class 或 JavaScript。

從 Media Queries 遷移

不需要一次全部改掉，建議漸進式遷移：

1. 找出多場景元件：先處理那些在不同佈局上下文中重複出現的元件
2. 加上容器宣告：在父元素加 container-type: inline-size
3. 轉換查詢語法：把 @media 改成 @container，注意斷點值要調整
4. 保留頁面級 Media Queries：整體頁面佈局還是用 Media Queries

瀏覽器支援與降級策略

2026 年的尺寸查詢支援率已經超過 95%，大部分場景可以放心使用。但如果需要支援舊瀏覽器：

@media (min-width: 768px) {
  .product-card { flex-direction: row; }
}
@supports (container-type: inline-size) {
  .grid-item { container-type: inline-size; }
  @container (min-width: 400px) {
    .product-card { flex-direction: row; }
  }
}

Container Queries 不是來取代 Media Queries 的，而是補充。元件級的響應式用 Container Queries，頁面級的佈局用 Media Queries，這才是 2026 年響應式設計的正確姿勢。