容器查询有望通过基于单个元素(容器)而不是整个视口的尺寸启用布局决策来革新Web设计。想象一个容器,该容器在600px宽,但在较窄的宽度上切换到列布局 - 这种颗粒控制水平是变换的。这与仅依赖屏幕尺寸断点的传统响应设计明显不同。
虽然百分比(%)提供了一些与容器相关的尺寸,但它们的功能是有限的。例如,可以将容器的宽度设置为其父母宽度的百分比,但是没有链接属性的机制。例如,您不能将字体大小设置为容器宽度的百分比。
输入容器单元!拟议的规范介绍了几个新单元:
这可以解锁前所未有的灵活性。字体大小,线高,间隙,边距(几乎任何属性)现在可以根据容器的宽度进行动态调整。
可以提前访问! Miriam(@terriblemia)突出显示了Chrome Canary的支持(启用了容器查询标志)。快速演示视频展示了潜力。
斯科特(Scott)的进一步探索(如果提供的话,请在此处插入斯科特(Scott)的工作),艾哈迈德(Ahmad)会发出其他见解:
艾哈迈德(Ahmad)的Shaded强调了用于管理组件内字体大小,填充和边距的容器单元的效率提高,从而消除了对手动调整的需求。
同时释放容器查询和容器单元仍然不确定,但潜在的影响是不可否认的。
以上是容器单元应该很方便的详细内容。更多信息请关注PHP中文网其他相关文章!