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

今年的情人节，我们将庆祝尺寸容器查询和容器查询单元全面登陆所有稳定版浏览器。

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 介于这些值之间，文本会相应地缩小和放大。

查询“情人节”的容器

为庆祝这个节日期间的容器查询热潮，我们特意为大家制作了情人节礼物，无论你是在哪种（最新版本）稳定版浏览器中查看这些内容，都能乐在其中！