自响应式网页设计出现以来，开发者们一直呼吁能够根据 DOM 元素的实际大小而非浏览器视口大小来设置样式（使用媒体查询）。事实上，容器查询（最初称为元素查询）可能是浏览器目前仍然缺少的、用户呼声最高的 CSS 功能。
已经有很多很多帖子解释了为什么容器查询很难在 CSS 中实现，以及为什么浏览器制造商对实现它们犹豫不决。 如果你现在想享受它，一点点 JavaScript 可以帮助你:
c51c33e1533e68c3f8fd24633700789f
整个事情看起来像这样:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
断点、选择器和样式属性可用于定义各种断点、自动选择器和添加的类的类型。 如果您正在使用脚本，您可以按如下方式处理新生成的类:
c51c33e1533e68c3f8fd24633700789f
对于覆盖层、弹出窗口、侧边栏或自定义元素中的元素，容器查询的使用特别值得 - 即使现在，例如使用上面的脚本。