CSS 容器查询用了半年，最大的收益不是响应式，是组件自治

容器查询（@container）普及之后，我所在的团队把一批组件的断点从“视口宽度”改成了“容器宽度”。用了半年，最大的收益不是“响应式更准”，而是组件不再需要知道自己在页面里被放在哪。

以前写一个卡片组件，要判断“在侧边栏窄、在主区域宽”，只能靠视口断点加父级 class 覆盖，组件和布局耦合。容器查询让卡片自己声明“容器窄于 400px 时竖排，宽于 400px 时横排”，放在哪都成立。组件库的复用成本明显下降。

代价也有：容器查询需要给父级显式声明 container-type，不是所有布局都适合；嵌套容器多了之后，调试时要看清楚当前匹配的是哪个容器；旧浏览器需要 fallback，但 2026 年主流浏览器支持已经够用。

一个实际建议：新组件优先用容器查询写自适应，旧组件按改动频率逐步迁移。别为了“用上新特性”一次性重写，容器查询的收益在组件复用，不在语法本身。