2022 年对于 CSS 来说将是非常棒的一年,大量的新功能即将出现。有些已经开始登陆浏览器,有些可能会在 2022 年获得广泛的浏览器支持,而对于一两个人来说,这个过程可能会更长一些。在本文中,我们将看看其中的一些。

容器查询 #
我们如何使用它们? #
对于容器查询,我们需要使用container属性(container-typeand的简写container-name)指定一个元素作为我们的容器。container-type可以是width、height或。_ 和是逻辑属性,根据文档的书写方式可能会产生不同的结果。inline-sizeblock-sizeinline-sizeblock-size

main, aside {
container: inline-size;
}

然后我们可以以@container类似于媒体查询的方式使用 at 规则。inline-size > 30em请注意在括号(而不是min-width: 30em)内表达规则的不同方式。这是Media Queries Level 4 规范的一部分。对于上面的卡片布局示例,当容器宽于 30rem 时,我们使用 flexbox 切换到水平布局:

@container (inline-size > 30em) {
.card {
display: flex;
}
}

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注