开发者工具提示:如何检查 CSS 容器查询

索菲娅·埃梅里亚诺娃 (Sofia Emelianova)
Sofia Emelianova

CSS 容器查询是 Web 开发者感兴趣的新 CSS 功能。从基于页面的响应式设计到基于容器的自适应设计,它可能会触发网络设计领域的变革。

Chrome 开发者工具可帮助您采用新的布局设计模式,让您及时掌握最新趋势。通过此 CSS 功能的支持,您现在可以在开发者工具中检查和调试容器查询。

上面的视频简要介绍了容器查询、容器查询的语法,以及如何在开发者工具中检查这些查询。

现在,您可以通过用于切换虚线叠加层的相应标记来发现容器元素及其后代。

容器徽章。

检查当容器满足查询条件时应用于后代的 @container 规则。

@container 规则。

如需详细了解开发者工具对容器查询的支持,请参阅检查和调试 CSS 容器查询