容器查詢

您可以透過媒體查詢，根據可視區域大小或使用的裝置類型調整版面配置。容器查詢可讓您根據元素祖先或容器的大小和狀態，對元素進行更具體的調整。

假設您有一個電子報訂閱表單，打算在網站上的多個情境中使用。您可能希望註冊頁面上的欄位跨越整個頁面寬度，但如果頁面含有其他內容，則希望欄位進入分割欄。

如這個範例所示，您可以透過容器查詢，根據最接近容器的屬性調整元素屬性，例如字型大小、邊框間距和版面配置，不受檢視區塊大小影響。

設定容器查詢

與媒體查詢不同，容器查詢分為兩個部分：

  1. 定義容器。
  2. 為子項元素編寫樣式，以便在父項容器符合查詢條件時套用。

定義容器

您可以使用 container-type 屬性定義容器。

.my-container-element {
  container-type: inline-size;
}

container-type 的 inline-size 可讓您查詢容器的內嵌軸。

如要同時查詢 inline 和 block 軸，請使用 container-type: size。

main,
.my-component {
  container-type: size;
}

container-type 的兩個值會套用不同類型的尺寸限制。元素的 Inline-size 限制會防止其後代影響其行內大小。

具有 size 容器的元素可防止後代元素影響區塊和內嵌軸的大小。

在這個範例中，您可以看到大小限制會影響套用限制的元素。

由於容器不會根據子項 (<p> 元素) 的大小調整大小，因此除非設定尺寸 (即 inline-size、block-size、aspect-ratio) 或將容器放入明確大小的版面配置中，否則容器會摺疊。

容器查詢條件

建立容器後，您可以加入以半形括號括住的條件，容器查詢內的樣式必須符合該條件，才會套用。如果是以祖先元素維度為準的容器大小查詢，條件會包含下列項目：

  • 尺寸特徵：width、height、inline-size、block-size、aspect-ratio 或 orientation，
  • 比較運算子 (即 >、<、=、>=)，
  • 以及長度值。
.my-container-element {
  container-type: inline-size;
}

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

您也可以使用半形冒號和單一值來撰寫尺寸特徵條件，以進行測試。

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

您也可以使用 and 和 or 等關鍵字合併多個條件，或使用運算子將多個條件串連在一起。

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

命名容器

如要指定特定容器 (即使不是最接近的祖先)，可以使用 container-name 屬性為容器命名。然後，您可以在定義條件前，參照要查詢的容器名稱。

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

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

具名容器仍必須是所要設定樣式元素的祖先。

使用 container 屬性的簡寫

container 屬性可讓您使用簡寫語法，同時定義容器並指定容器類型。

.sidebar {
  container: main-sidebar / inline-size;
}

容器名稱位於斜線之前，容器類型則位於斜線之後。

容器查詢單位

在容器中，您也可以存取容器相對長度單位。這樣一來，元件就能在不同容器中存在，因為相對長度會根據容器的尺寸調整，因此更具彈性。

這裡的容器長度單位 cqi (查詢容器內嵌大小的 1%) 用於按鈕的邊框間距。

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

兩個按鈕都套用了相同的相對單位，但由於單位是相對於容器大小，因此第二個按鈕的容器較大，邊框間距也較多。

巢狀容器查詢

您可以在選取器內巢狀放置容器查詢。

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

也可以將這些查詢或 at 規則巢狀內嵌至其他容器查詢中。

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

隨堂測驗

哪些大小特徵可用於容器查詢條件？(可複選)

width
答對了！
block-size
正確答案！
inline-size
答對了！
viewport-size
答錯了。viewport-size 不是容器查詢的有效大小特徵。
height
答對了！

使用 inline-size 容器類型，您可以查詢容器的 aspect-ratio。

是
答錯了。inline-size 容器類型無法查詢元素的 aspect-ratio，因為 aspect-ratio 會將 block-size 或 height 納入考量。
否
答對了！您需要 container-type 的 size，才能查詢容器的長寬比，因為這會同時考量容器的內嵌和區塊維度。

如要使用以容器高度為準的容器相對單位，可以選擇下列哪項？

cqi
答錯了。cqi 是以容器的邏輯內嵌大小為依據
cqq
答錯了。cqw 是根據容器寬度而定
cqb
答對了！cqb 是以容器的邏輯區塊大小為準
cqvh
答錯了。「cqvh」不是有效的 CSS 大小單位
cqh
答對了！cqh 是以容器高度為準