Ahmad Shadeed 在容器查询方面较早,并拥有 越来越多的例子 基于日常模式。
而且,如果你错过了,他的 关于容器查询的最新帖子 自本月登陆 Chrome 105 以来,它们在介绍它们的工作方式方面做得非常出色(我们很快就会在 Safari 16 中看到它们)。 一些选择亮点和要点:
- 容器定义为
container-type
财产。 以前的演示和提案一直在使用contain
代替。 - 容器查询非常类似于我们一直在编写的以视口大小为目标的媒体查询。 所以,而不是像
@media (min-width: 600px) {}
, 我们有@container (min-width: 600px) {}
. 这应该使得将许多媒体查询转换为容器查询相当简单,减去计算新断点值的工作。 - 我们可以命名容器以帮助在我们的代码中区分它们(例如
container-name: blockquote
).
干得好,艾哈迈德! 并感谢分享!