容器查询，即根据特定元素的值（如宽度和高度）来设置元素样式的能力。我们有媒体查询，但它们是基于视窗而不是单个元素。对于容器查询，有 很多 用例。之前已经说过，但我再说一遍，如果存在容器查询，CSS 中绝大多数的媒体查询实际上将是容器查询。
关于如何从技术上实现它的讨论变得有趣。 在我看来，理想情况下，我们可以在 CSS 中直接获得这种能力。以这种方式实现它遇到的问题是循环性。这甚至不是指能够编写触发不匹配查询场景的 CSS（这本身就足够棘手），而是指实际上改变浏览器渲染页面的长期单遍方式。
容器查询的问题不在于找到完美的语法或说服任何人它们是必要的，而在于浏览器的运作方式。https://#/7ZxMczD4ag pic.twitter.com/DeHyR9zRuO
— CSS-Tricks (@Real_CSS_Tricks) 2018 年 2 月 1 日
有很多解决这个问题的方法。当然，都是用 JavaScript。Dave Rupert 在这里总结了一些。它们都略有不同。
在我看来，最适合这种场景的 JavaScript API 是 ResizeObserver。在我写这篇文章的时候，它只能在 Chrome 中使用，但这里有一个图表，随着时间的推移，它应该保持更新
这些浏览器支持数据来自 Caniuse，其中有更多详细信息。数字表示浏览器从该版本开始支持该功能。
台式机
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 64 | 69 | 否 | 79 | 13.1 |
移动设备/平板电脑
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 13.4-13.7 |
说了这么多，其实就是说 Philip Walton 刚刚写了一篇 非常棒的文章，关于如何做到这一点。其核心在于使用 ResizeOveserver 将类添加到元素，然后使用这些类来设置元素的样式。他总结道
本文中概述的策略
- 将在今天，在任何网站上起作用
- 易于实现（可复制/粘贴）
- 性能与基于 CSS 的解决方案一样好
- 不需要任何特定的库、框架或构建工具。
- 利用渐进增强，因此在缺少必需 API 或禁用了 JavaScript 的浏览器上，用户仍然可以使用该网站。
ResizeObserver 的浏览器支持情况有点可怕，但它是一个非常棒的 API，我希望它能早日获得更广泛的支持。