1. Web
  2. CSS
  3. CSS 包含
  4. 容器查詢

CSS 容器查詢

容器查詢允許您根據容器的某些屬性來應用樣式到元素

  • 容器的大小。
  • 應用於容器的樣式。
  • 容器或其滾動祖先的滾動狀態。

容器查詢是媒體查詢的替代方案，媒體查詢根據視口大小或其他裝置特性來應用樣式。

本文介紹瞭如何使用容器查詢，特別是側重於大小容器查詢。其他指南詳細討論了樣式和滾動狀態容器查詢。

Two different query types. First, a media query based on the viewport's width, which is the full width of the browser. Second, a container query based on the width of a container element.

使用容器大小查詢

雖然容器查詢根據容器型別應用樣式，但容器大小查詢專門根據容器的尺寸應用樣式。要使用容器大小查詢，您需要在元素上宣告一個包含上下文，以便瀏覽器知道您可能稍後要查詢此容器的尺寸。為此，請使用container-type屬性，其值為size、inline-size或normal。

這些值具有以下效果

size

查詢將基於容器的內聯和塊尺寸。對容器應用佈局、樣式和大小包含。

inline-size

查詢將基於容器的內聯尺寸。對元素應用佈局、樣式和內聯大小包含。

normal

該元素不是任何容器大小查詢的查詢容器，但仍然是容器樣式查詢的查詢容器。

考慮以下部落格文章卡片元件的示例，其中包含標題和一些文字

html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

您可以使用container-type屬性建立包含上下文

css
.post {
  container-type: inline-size;
}

接下來，使用@container at-rule 來定義容器查詢。以下示例中的查詢將根據最近的具有包含上下文的祖先的大小向元素應用樣式。具體來說，如果容器寬度大於700px，此查詢將為卡片標題應用更大的字型大小。

css
/* Default heading styles for the card title */
.card h2 {
  font-size: 1em;
}

/* If the container is larger than 700px */
@container (width > 700px) {
  .card h2 {
    font-size: 2em;
  }
}

使用容器查詢，卡片可以在頁面的多個區域重複使用，而無需每次都知道它將具體放置在哪裡。如果帶有卡片的容器寬度小於700px，則卡片標題的字型將很小；如果卡片位於寬度大於700px的容器中，則卡片標題的字型將更大。

有關容器查詢語法的更多資訊，請參閱@container頁面。

命名包含上下文

在上一節中，容器查詢根據最近的具有包含上下文的祖先應用樣式。可以使用container-name屬性為包含上下文命名。一旦命名，該名稱可以在@container查詢中使用，以定位特定容器。以下示例建立了一個名為sidebar的包含上下文

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

然後，您可以使用@container at-rule 定位此包含上下文

css
@container sidebar (width > 700px) {
  .card {
    font-size: 2em;
  }
}

有關命名包含上下文的更多資訊，請參見container-name頁面。

容器速記語法

宣告包含上下文的速記方式是使用container屬性

css
.post {
  container: sidebar / inline-size;
}

有關此屬性的更多資訊，請參見container參考。

容器查詢長度單位

當使用容器查詢向容器應用樣式時，您可以使用容器查詢長度單位。這些單位指定相對於查詢容器尺寸的長度。使用相對於其容器的長度單位的元件在不同的容器中更靈活地使用，而無需重新計算具體的長度值。

如果查詢沒有可用的合格容器，容器查詢長度單位將預設為該軸的小視口單位（sv*）。

容器查詢長度單位是

  • cqw：查詢容器寬度的 1%
  • cqh：查詢容器高度的 1%
  • cqi：查詢容器內聯大小的 1%
  • cqb：查詢容器塊大小的 1%
  • cqmin：cqi或cqb中的較小值
  • cqmax：cqi或cqb中的較大值

以下示例使用cqi單位根據容器的內聯大小設定標題的字型大小

css
@container (width > 700px) {
  .card h2 {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

有關這些單位的更多資訊，請參閱容器查詢長度單位參考。

容器查詢的備用方案

對於尚未支援容器查詢的瀏覽器，可以使用grid和flex為本頁使用的卡片元件建立類似的效果。以下示例使用grid-template-columns宣告為卡片元件建立兩列布局。

css
.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
}

如果您想為視口較小的裝置使用單列布局，可以使用媒體查詢來更改網格模板

css
@media (width <= 700px) {
  .card {
    grid-template-columns: 1fr;
  }
}

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由MDN 貢獻者於修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.