CSS Container Queries 容器查詢

容器查詢 (Container Queries) 是 CSS 的一項重大進化。傳統的 媒體查詢 (Media Queries) 是根據「瀏覽器視窗 (Viewport)」的大小來改變樣式；而容器查詢則允許元素根據其「父容器」的大小來決定自己的樣式。

這讓組件（Component）能夠真正實現「自適應」：無論放在大螢幕的側邊欄，還是放在手機版的滿版區塊，組件都能根據自己分配到的空間來調整排版。

基本流程

使用容器查詢主要分為兩個步驟：

1. 定義容器：在父元素上設定 container-type。
2. 撰寫查詢：在子元素上使用 @container 套用樣式。

1. 定義容器 (Defining a Container)

要讓一個元素成為「容器」，必須使用 container-type 屬性。

.parent {
  /* 宣告這個元素是一個觀測容器 */
  container-type: inline-size;
}

container-type 取值

• inline-size（最常用）：根據容器的 寬度 進行查詢。
• size：根據容器的 寬度與高度 進行查詢（這通常要求容器有固定的高度）。
• normal：預設值，該元素不是查詢容器。

2. 撰寫容器查詢 (@container)

一旦定義了容器，子元素就可以根據容器的大小來套用樣式。

/* 當容器寬度大於 400px 時套用 */
@container (min-width: 400px) {
  .child {
    display: flex;
    gap: 20px;
  }
}

具名容器 (Container Name)

如果你有多層巢狀容器，可以使用 container-name 為特定的容器命名，以便更精確地指向某個父元素。

.main-layout {
  container-type: inline-size;
  container-name: sidebar;
}

/* 指名針對 'sidebar' 容器進行查詢 */
@container sidebar (min-width: 300px) {
  .widget {
    padding: 20px;
  }
}

實務範例：自適應卡片組件

想像一個卡片組件，當它在寬度較窄的容器中時呈現「垂直排版」，在寬度較寬的容器中則自動轉為「水平排版」。

/* 1. 設定容器 */
.card-wrapper {
  container-type: inline-size;
  width: 100%;
}

/* 2. 預設樣式（垂直排版） */
.card {
  display: flex;
  flex-direction: column;
}

/* 3. 當容器夠寬時切換為水平排版 */
@container (min-width: 500px) {
  .card {
    flex-direction: row;
    align-items: center;
  }

  .card-image {
    width: 200px;
  }
}

容器查詢單位 (Units)

CSS 也引入了專屬的單位，其數值相對於容器的大小：

• cqw：容器寬度的 1%
• cqh：容器高度 of 的 1%
• cqmin：容器寬或高之中較小值的 1%
• cqmax：容器寬或高之中較大值的 1%

.card-title {
  /* 字體大小隨「容器」寬度縮放 */
  font-size: 5cqw;
}

關於更多單位細節，請參考 CSS 單位。

媒體查詢 vs 容器查詢

瀏覽器支援度

容器查詢目前已獲得 Chrome、Edge、Firefox 與 Safari 等主流瀏覽器的全面支援。對於需要支援極舊版本瀏覽器的專案，建議搭配 Flexbox 或 Grid 的 auto-fit 特性作為回退（Fallback）方案。