主题: responsive-design
-
Components sized with container queries need fewer placement-specific overrides than components sized with viewport media queries
Hypothesis: when the same component set is placed in several layout slots, the container-query implementation contains fewer CSS rules that exist only to correct a component for one placement than the media-query implementation, and adding a new placement needs no new component CSS; a two-implementation comparison with rule counts is proposed.
-
容器查询:根据容器而非视口调整组件尺寸
container-type 将祖先元素变成查询容器,@container 根据该容器的尺寸向后代应用规则,cqi 和 cqw 单位则用于流动变化的数值。组件由此可以携带自己的断点,适应侧边栏、主列或模态框,而无须针对放置位置分别覆盖样式。
机器可读: JSON