Container Queries简介

长久以来，CSS 中最受欢迎的功能之一就是容器查询。这几乎是我们的圣杯，也是 CSS 工具箱中缺失的最大拼图。

现在，容器查询终于来了。过去近两年，它已经在所有主流浏览器中受到了支持。我们的祈祷终于得到了回应！

我们现在可以根据元素的容器来应用条件 CSS，使用的语法也很熟悉：

@container (min-width: 40rem) {
  .some-elem {
    font-size: 1.5rem;
  }
}

不过奇怪的是，我们中很少有人实际在使用容器查询。我和许多开发者聊过，大多数人仅仅是做了一些简单的尝试，如果他们真的试过的话。我们终于得到了想要的工具，但却还没有普及使用。

这其中有很多原因，但我认为最大的一个原因是，关于它们的工作原理还存在很多困惑。容器查询不像媒体查询那样直接。要有效地使用它们，我们需要了解它的限制，以及如何在这些限制内工作。

我已经使用容器查询几个月了，一旦建立了正确的思维模型，容器查询真的很美好。在这篇文章中，我们将深入探讨这些内容，以便你可以在工作中开始使用它们！

浏览器不支持

看起来你正在使用一个不支持容器查询的浏览器。因此，页面上的演示可能无法正常工作。

你大概仍然可以理解这篇文章的内容，但为了获得最佳体验，我建议你更新或切换到支持的浏览器（在新标签页中打开）。

基本概念

过去几十年，我们做响应式设计的主要工具是媒体查询。最常见的是，我们使用视口的宽度来有条件地应用一些 CSS：

@media (min-width: 40rem) {
  .mobile-only {
    display: none;
  }
}

关于单位的说明

大多数开发者在媒体查询中使用像素，但这往往会让那些增大浏览器默认字体大小的用户体验变差。在本文中，我将为所有媒体/容器查询专门使用 rem 单位。

你可以在我的博客文章《关于像素和无障碍的惊人真相》中了解更多。

媒体查询很好用，但它们只关注全局属性，比如视口尺寸或操作系统的主题颜色。有时，我们希望根据某些局部属性来有条件地应用 CSS，例如元素容器的大小。

举个例子，假设我们有一个 ProfileCard 组件，用来显示用户档案的关键信息：

Anthony Harris
@theboxmodel
San Francisco, US
Staff UI/UX Designer
Feb 4, 2015
748 Posts

Dr. Kai Bechstein
@pianofingers
Berlin, DE
Physician
Oct 25, 2019
1369 Posts

Faajal Singh
@faajal31
Vancouver, CA
Principal Engineer
Nov 25, 2017
2305 Posts

在这种情况下，每个 ProfileCard 都比较窄，因此信息会垂直堆叠成一个高柱。

但在其他情况下，我们可能会有更多的空间。这样的话，我们的 ProfileCard 能根据可用空间自动切换布局不是很酷吗？

也许像这样：

Svetlana Ahmed
@Svetlana14
Tokyo, JP
Tattoo Artist
Apr 15, 2013
1293 Posts

浏览器不支持

此 ProfileCard 使用容器查询来在空间允许时展示一个替代布局。由于你的浏览器不支持容器查询，它对你来说可能显示不出不同效果。

请考虑切换到支持的浏览器（在新标签页中打开）。

在某些情况下，如果我们的 ProfileCard 会随着视口尺寸变化，我们可以使用媒体查询来实现这个效果……但并不总是如此。

例如，假设我们使用类似于这样的 flex 网格排列这些卡片：