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