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

Sofia Emelianova
Sofia Emelianova

CSS 容器查询是网站开发者非常感兴趣的新功能。这可能会引发网页设计领域的一场变革 - 从基于网页的自适应设计到基于容器的自适应设计

Chrome 开发者工具可帮助您采用新的布局设计模式,紧跟最新趋势。得益于此 CSS 功能的支持,您现在可以在开发者工具中检查和调试容器查询。

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

现在,您可以通过显示/隐藏虚线叠加层的相应标志来发现容器元素及其后代。

容器标志。

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

@container 规则。

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