【CSS】容器查询：@container

什么是容器查询

容器查询是一种CSS特性，允许开发者根据组件所在的容器的大小来应用样式，而不是整个视口的大小。这使得组件能够更加灵活地适应不同的布局环境，而不仅仅是依赖于视口的大小。

如何使用@container

使用容器查询，首先需要定义一个容器。可以通过设置 container-type 属性来实现。

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

.container 元素被定义为一个容器，并且容器查询将基于内联尺寸（即宽度）。
接下来，我们可以使用 @container 规则来根据容器的大小应用样式。

@container (min-width: 200px) {
  .element {
    background-color: lightblue;
  }
}

@container (min-width: 250px) {
  .element {
    background-color: lightgreen;
  }
}

在这个例子中，当容器宽度至少为200px时，.element 的背景颜色将变为浅蓝色；当容器宽度至少为250px时，背景颜色将变为浅绿色。

实际应用场景

容器查询在实际开发中有许多应用场景。例如，在一个复杂的布局中，不同的组件可能被放置在不同大小的容器中。使用容器查询，我们可以确保这些组件能够根据其所在的容器大小自动调整样式，而不需要为每个可能的视口大小编写大量的媒体查询。

浏览器支持