容器单位应该相当方便

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适用于旅程每个阶段的云产品。立即开始使用 价值 200 美元的免费积分!

容器查询将解决 web 设计中长期存在的问题,即我们希望根据元素(容器)的大小而不是整个页面的大小来做出设计选择。因此,如果容器宽度为 600px,它可能具有行式设计,但如果宽度小于此,它将具有列式设计,并且我们将拥有这种控制权。这与根据屏幕大小在布局之间进行转换大不相同。

由于 % 单位,我们已经可以根据元素的大小调整某些东西的大小。例如,所有这些容器的宽度都是其父容器宽度的 50%。

此处的 % 与使用的属性一一对应,因此 widthwidth%。同样,我可以将 % 用于 font-size,但它将是父容器的 font-size%。没有东西允许我交叉属性并将 font-size 设置为容器 width 的百分比。

也就是说,除非我们获得容器单位!以下是根据草案规范的单位表

单位相对于
qw查询容器宽度的 1%
qh查询容器高度的 1%
qi查询容器内联大小的 1%
qb查询容器块大小的 1%
qminqi 或 qb 中较小的值
qmaxqi 或 qb 中较大的值

使用这些单位,我可以轻松地将 font-size 设置为父容器 width 的百分比。或者 line-height!或者 gap!或者 margin!或者 whatever

Miriam 指出,只要容器查询标志已启用,我们现在就可以在 Chrome Canary 中使用这些单位。

我也玩了一下。我只是在这里放一个视频,因为在这些非常早期的阶段,这将更容易看到。

Scott 也做了一些很棒的探索性工作

https://twitter.com/ScottKellum/status/1436360780535025688

Ahmad Shadeed 也一直在关注这件事!

在处理诸如 font-sizepadding 和 margin 之类的组件内的东西时,查询单位可以为我们节省精力和时间。我们可以使用查询单位,而不是手动增加字体大小。

Ahmad Shadeed“CSS 容器查询单位”

也许容器查询和容器单位将同时真正发布。🤷