做前端這麼多年，響應式設計一直有個讓我很煩的問題：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 遷移

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

找出多場景元件：先處理那些在不同佈局上下文中重複出現的元件
加上容器宣告：在父元素加 container-type: inline-size
轉換查詢語法：把 @media 改成 @container，注意斷點值要調整
保留頁面級 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 年響應式設計的正確姿勢。

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