长久以来，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 网格排列这些卡片：
