CSS 容器查询

使用容器大小查询

虽然容器查询根据容器类型应用样式，但容器大小查询专门根据容器的尺寸应用样式。要使用容器大小查询，您需要在元素上声明一个包含上下文，以便浏览器知道您可能稍后要查询此容器的尺寸。为此，请使用container-type属性，其值为size、inline-size或normal。

这些值具有以下效果

size

查询将基于容器的内联和块尺寸。对容器应用布局、样式和大小包含。

inline-size

查询将基于容器的内联尺寸。对元素应用布局、样式和内联大小包含。

normal

该元素不是任何容器大小查询的查询容器，但仍然是容器样式查询的查询容器。

考虑以下博客文章卡片组件的示例，其中包含标题和一些文本

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

您可以使用container-type属性创建包含上下文

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

接下来，使用@container at-rule 来定义容器查询。以下示例中的查询将根据最近的具有包含上下文的祖先的大小向元素应用样式。具体来说，如果容器宽度大于700px，此查询将为卡片标题应用更大的字体大小。

/* 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的包含上下文

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

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

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

有关命名包含上下文的更多信息，请参见container-name页面。

容器速记语法

声明包含上下文的速记方式是使用container属性

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

有关此属性的更多信息，请参见container参考。

容器查询长度单位

当使用容器查询向容器应用样式时，您可以使用容器查询长度单位。这些单位指定相对于查询容器尺寸的长度。使用相对于其容器的长度单位的组件在不同的容器中更灵活地使用，而无需重新计算具体的长度值。

如果查询没有可用的合格容器，容器查询长度单位将默认为该轴的小视口单位（sv*）。

容器查询长度单位是

• cqw：查询容器宽度的 1%
• cqh：查询容器高度的 1%
• cqi：查询容器内联大小的 1%
• cqb：查询容器块大小的 1%
• cqmin：cqi或cqb中的较小值
• cqmax：cqi或cqb中的较大值

以下示例使用cqi单位根据容器的内联大小设置标题的字体大小

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

有关这些单位的更多信息，请参阅容器查询长度单位参考。

容器查询的备用方案

对于尚未支持容器查询的浏览器，可以使用grid和flex为本页使用的卡片组件创建类似的效果。以下示例使用grid-template-columns声明为卡片组件创建两列布局。

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

如果您想为视口较小的设备使用单列布局，可以使用媒体查询来更改网格模板

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

另见

• 媒体查询
• CSS @container at-rule
• CSS contain 属性
• CSS container 简写属性
• CSS container-name 属性
• CSS content-visibility 属性
• 使用容器大小和样式查询
• 使用容器滚动状态查询
• Ahmad Shadeed 的向 CSS 容器查询问好
• 容器查询：快速入门指南
• 容器查询文章合集