【Web前瞻】CSS 容器查询来了，你不能错过的10个精彩案例分享！

导读：就像我们开始通过媒体查询构建响应式网站时一样，现在，CSS容器查询也终于来了！这项功能目前已经在 Google Chrome (105) 和 Safari 16 中得到支持。本文将解释容器查询的工作原理、我们如何使用它们以及语法是什么样的，并分享一些实际的使用示例来帮助你更好地理解它。

介绍

在设计组件时，我们倾向于添加不同的样式，并根据 CSS 类或视口大小更改它们。

假设我们有一个卡片组件，当视口足够大时，它应该切换到水平样式。乍一看，这可能并不难，但当你更深入地考虑它时，会发现有点复杂。

如果我们想在不同的地方使用同一张卡片，比如在空间紧张的侧边栏中，以及在我们有更多空间的主要部分，我们就需要定义一个新的类。

.c-article {
  /* Default stacked style */
}

@media (min-width: 800px) {
  /* Horizontal style. */
  .c-article--horizontal {
    display: flex;
    align-items: center;
  }
}

媒体查询在局部响应式控制中的缺点就体现在这里，在不同区域中应用同一个组件，我们都必须去定义一个新的"变体类"，如果我们只用一个类，定义其在不同视窗大小下的样式，那最终可能会得到如下所示的内容。

从 UI 的角度来看，主题内容部分的卡片组件已经过大了。

现在，使用容器查询，我们就可以编写响应父级或容器宽度的 CSS了，如下图：

我们看到，在媒体查询中，只能根据屏幕宽度查询调整组件，但在容器查询中，我们终于可以根据父级别查询来调整组件，这也就意味着不用再去定义不同的类了。

什么是容器查询？

一种针对离它最近的父组件查询组件的方法，该父组件需要定义container-type属性。

它和我们过去在媒体查询中编写 CSS 的方式一样，只不过针对的是组件级别。

容器查询语法

要根据父宽度查询组件，我们需要使用container-type属性，且为避免待会定义的元素拥有多个容器时的情况，最好给容器一个命名。

.wrapper {
  container-type: inline-size;
  container-name: card;
}

有了这个，我们就可以开始查询一个组件了。在下面的示例中，如果.card元素的容器的宽度等于400px或大于，我们就为其添加特定的样式。

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

前面我们给容器命名过，所以在@container旁边可以附加容器名称，像这样：

@container card (min-width: 400px) {
  .......
}

让我们回过头看最初的示例，这下我们完全可以避免编写多个 CSS 类了：

.wrapper {
  container-type: inline-size;
  container-name: card;
}

.c-article {
  /* Default stacked style */
}

@container card (min-width: 400px) {
  /* Horizontal style. */
  .c-article {
    display: flex;
    align-items: center;
  }
}