容器查询讨论

现在，我们有能力编写仅在浏览器窗口本身处于特定宽度或高度时才适用的 CSS。 可以说是断点。超级有用。我们没有（原生）根据任何特定元素（或“容器”）的属性编写条件 CSS 的能力。

自从 RICG 决定 处理这个问题 已经快两年了。我不确定现在的情况。似乎有点暂停，但这并不意味着整个讨论都暂停了。

据我所知，前端开发人员的呼声是：**如果我拥有容器查询，我写的 90% 的媒体查询将是容器查询。** 想法是，你通常试图调整一些特定元素的属性，这些属性与整个浏览器窗口范围之外的某些内容相关。

Ethan Marcotte 最近写道

我并不想暗示 指定容器查询的技术挑战 非常容易。但任何形式的推动都将受到整个响应式设计社区的热烈欢迎。就我个人而言，我知道容器查询将彻底改变我的设计实践，并更好地为移动设备、桌面设备、平板电脑以及即将到来的任何设备做好响应式设计的准备。

说的好。

他指出了他的一些作品，这些作品中的模块处于完全不同的情况下，这些情况与视窗无关，而是与父容器更直接相关。

但最近，在一个**奇怪的意外转折**中，出现了不少“嗯，也许我们并不像我们想象的那么需要这些”的言论。

例如，Dave Rupert 在玩 CSS 网格布局时发现他能够 完全放弃一些媒体查询

我 重构了一个大约 50 行的 Flexbox 网格，只需大约 5 行 CSS 代码就能用 CSS 网格实现。……最棒的是，我们不需要媒体查询！这将在将来节省大量代码。在这个特定的项目中，我们实际上有三个 Flexbox 网格，它们的断点略有不同。auto-fill 关键字在有空间时自动生成列。

查看 CodePen 上 Dave Rupert (@davatron5000) 的 Flexbox 网格与 CSS 网格。

Flexbox 可以通过其包裹能力、能够被告知是否可以增长以及增长多少以及增长到什么程度的能力来进行一些非常花哨的舞蹈，这让我们在没有显式媒体查询的情况下能够获得很大的控制权。

网格为我们提供了更多工具，例如自动布局、minmax() 以及 min-content 和 auto-fill 等关键字。您可以以任何方式嵌套 Flex 容器和网格容器，这带来了一些强大的可能性。

例如，看看 Jonathan Snook 玩耍（他自认只是开始理解这些类型的布局）在容器查询控制的一些模块方面取得了很大的成功。

Paul Robert Lloyd 明确质疑了对容器查询的需求

在我看来，容器查询似乎是昨天对今天问题的答案。我更希望我们使用现有的强大工具，并拥抱终于到来的未来。

即使是使用仅影响页面布局的媒体查询重建 Ethan 的示例

查看 CodePen 上 Paul Lloyd (@paulrobertlloyd) 的 重建 The Toast 的再循环模块。

Jeremy Keith 补充道，就像小熊一样

……这是一篇关于容器查询可能不是我们响应式设计问题的万能解决方案的经过深思熟虑的好文章。问题是，我认为容器查询并不是要成为一个包罗万象的解决方案，而是一个针对特定问题类别非常有用的解决方案。

所以，我认为容器查询并没有与网格布局竞争（就像网格布局没有与 flexbox 竞争一样），而是一个我们能够拥有并且非常有用的工具。

当然，即使是容器查询也无法解决所有 RWD 问题。正如 Paul 所说

我质疑容器查询需求的最后一个原因是，布局的变化有时也需要行为的变化。如果实现这一点涉及到重新构建 DOM，我们实际上是在用一个组件替换另一个组件。

所以，是的，新奇的布局工具可能会在许多情况下帮助我们避免专门针对布局变化使用容器查询。但布局并不是唯一可能因容器情况而发生变化的东西。Ethan 回应道

根据模块的位置、高度和宽度，我可能希望更改其设计的几个不同方面。这些更改将包括但不限于

1. **视觉权重。** 根据模块的位置，我经常希望更改其视觉突出的程度。这可能包括更改其颜色、背景颜色或其内部单个元素的大小，所有这些都取决于分配给模块的空间。
2. **排版。** 与最后一点相关，我经常需要更改元素的排版，根据其容器的大小。不幸的是，网格布局和 flexbox 在这里无能为力；虽然我非常喜欢 灵活的排版——Trent 可以为我作证——我们可用的工具仍然非常以视窗为中心。
3. **内容层次结构。** 我经常需要更改元素的优先级，具体取决于其容器的大小。也许我会根据设计的需要有条件地将元素定位得更高（或更低）以使其更（或更不）可见。在更像 flexbox 的布局中，我可能希望更改给定元素的 order，或者可能更改模块的 flex-direction——同样，所有这些都取决于容器的尺寸。

Brad Frost 做出了 一个简单而合理的论点

……拥有一个机制，它可以这样说：“如果此组件位于一个至少为 X 宽度容器中，请执行以下样式更改”，感觉上是合理的。

这有点像响应式图像。您可以使用 srcset 和 sizes 做很多事情，但是当您需要非常明确地指定如何行为时，也可以使用 <picture>。

就我个人而言，我希望能看到大约 100 个不同的 用例 被详细阐述。如果事实证明其中一些用例可以在没有容器查询的情况下完成，那就太好了，但对我来说，拥有容器查询似乎仍然非常方便。