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

此处的 %
与使用的属性一一对应,因此 width
是 width
的 %
。同样,我可以将 %
用于 font-size
,但它将是父容器的 font-size
的 %
。没有东西允许我交叉属性并将 font-size
设置为容器 width
的百分比。
也就是说,除非我们获得容器单位!以下是根据草案规范的单位表
单位 | 相对于 |
---|---|
qw | 查询容器宽度的 1% |
qh | 查询容器高度的 1% |
qi | 查询容器内联大小的 1% |
qb | 查询容器块大小的 1% |
qmin | qi 或 qb 中较小的值 |
qmax | qi 或 qb 中较大的值 |
使用这些单位,我可以轻松地将 font-size
设置为父容器 width
的百分比。或者 line-height
!或者 gap
!或者 margin
!或者 whatever
!
Miriam 指出,只要容器查询标志已启用,我们现在就可以在 Chrome Canary 中使用这些单位。
🥳 哦,还有 Chrome Canary(带有容器查询标志)现在支持查询单位:https://127.0.0.1/GkIbLFW5C6
—— Mia,在 Bass 上 (@TerribleMia) 2021 年 9 月 9 日
目前为止,我还不知道它是什么时候发生的——我只测试过 qi,因为它最有用。
如果我可以引用@chriscoyier的话……“CSS 向你快速逼近”。
我也玩了一下。我只是在这里放一个视频,因为在这些非常早期的阶段,这将更容易看到。
Scott 也做了一些很棒的探索性工作
Ahmad Shadeed 也一直在关注这件事!
在处理诸如
Ahmad Shadeed,“CSS 容器查询单位”font-size
,padding
和margin
之类的组件内的东西时,查询单位可以为我们节省精力和时间。我们可以使用查询单位,而不是手动增加字体大小。

也许容器查询和容器单位将同时真正发布。🤷
你通常会将 clamp 与视窗宽度 vw 单位一起使用。使用 qw 或 qi 如何使其变得更好?
它不是关于视窗,而是关于容器——从布局角度来看是父节点。否则,相同的逻辑适用。
这些将如何与浏览器缩放一起使用?我遇到的视窗大小问题是,它不允许用户使用浏览器缩放调整字体大小。如果容器在这里是 vw 大小,我怀疑我们会遇到同样的问题?