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

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

Una Kravets

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

浏览器支持

  • Chrome：105。
  • Edge：105.
  • Firefox：110。
  • Safari：16。

来源

借助容器查询，您可以查询父元素（例如其 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 介于这些值之间，文本将相应地缩小和放大。

容器查询情人节

为庆祝容器查询在情人节的热烈欢迎，我们为大家准备了一份情人节礼物，无论您使用的是哪款（最新版本）稳定版浏览器，都可以欣赏！