容器查询在稳定版浏览器中发布
使用集合保持井井有条根据您的偏好保存内容并进行分类。

在这个情人节，我们庆祝尺寸容器查询和容器查询单位在所有现代浏览器中稳定发布。

Una Kravets

容器查询的爱意在空气中弥漫！在这个情人节，尺寸容器查询和容器查询单位在所有现代浏览器中都已稳定。

浏览器支持

借助容器查询，您可以查询父元素的样式信息，例如其 inline-size。使用媒体查询，您可以查询视口的大小，而容器查询使组件可以根据它们在 UI 中的位置进行更改。

Media queries vs container queries.

容器查询对于响应式设计和可重用组件特别有用。例如，启用一个卡片组件，该组件在侧边栏中放置时可以以一种方式布局，而在产品网格中以不同的配置布局。

使用容器查询

要使用容器查询，请首先在父元素上设置 containment。通过在父容器上设置 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 介于这些值之间，则文本将相应地缩小和放大。

为了庆祝这个节日对容器查询的爱，我们为您制作了一张情人节卡片，无论您在哪个（最新版本）稳定版浏览器中查看此页面，都可以尽情享用！