此页面由 Cloud Translation API 翻译。

容器查询出现在稳定版浏览器中

今年的情人节，我们将庆祝在所有稳定版浏览器中实现大小容器查询和容器查询单元。

Una Kravets

容器查询功能如期而至！今年情人节，大小容器查询和容器查询单元在所有现代浏览器中都很稳定。

浏览器支持

借助容器查询，您可以查询父元素的样式信息，例如其 inline-size。借助媒体查询，您可以查询视口的大小，容器查询支持能够根据在界面中的位置变化的组件。

媒体查询与容器查询。

对于自适应设计和可重复使用的组件，容器查询尤其方便。例如，启用一个卡片组件，该组件在放入边栏中时可以采用一种布局方式，但在产品网格中采用不同配置。

使用容器查询

如需使用容器查询，请先在父元素上设置包含关系。您可以通过在父级容器上设置 container-type 来实现此目的，也可以使用 container 简写形式同时为其指定类型和名称：

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

将 container-type 设置为 inline-size 会查询父项的内嵌方向尺寸。在英语等拉丁语言中，该值为卡片的宽度，因为文本从左到右以内嵌方式排列。

现在，您可以使用该容器通过 @container 将样式应用于其任何子级：

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

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

此外，您可以像使用基于视口的单位值一样使用容器查询长度单位值。不同之处在于，容器单元对应于容器而非视口。以下示例演示了使用容器查询单元和 clamp() 函数来提供最小和最大大小值的自适应排版：

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

上面的 15cqi 是指容器的 15% 的内嵌大小。clamp() 函数指定的最小值为 2rem，最大值为 4rem。与此同时，如果 15cqi 介于这些值之间，文本会相应地缩小和增大。

为了庆祝这个节日的“容器”查询热爱，我们特意制作了情人节礼物，无论您在什么（最新版本）的稳定版浏览器中查看，都能尽情畅享！