CSS Container Queries与Style Queries：响应式的新纪元

CSS Container Queries与Style Queries：响应式的新纪元

Media Queries基于视口宽度，Container Queries基于父容器宽度。这意味着同一个组件放在侧边栏和主内容区可以自动呈现不同的布局——不用写两套CSS，不用JS判断位置。浏览器支持率在2026年达到95%+，生产可用。

Style Queries更进一步：不仅查询容器尺寸，还查询CSS自定义属性的值。@container style(--theme: dark)让组件根据父级设置的--theme变量自动切换暗黑模式。实用场景：设计系统中的组件库——开发Button组件时用Container Queries适配不同容器宽度，用Style Queries适配不同主题。一个Button组件适配所有场景，不用写30个variant类。