用容器查询重做组件布局

媒体查询看的是视口，容器查询看的是组件自己被放进了多宽的地方。同一个卡片组件出现在主栏和侧栏时，只有后者能让它自己决定怎么排。

两种查询的区别

媒体查询把布局决策绑在整页宽度上，组件搬到别处就失效。容器查询把决策绑在组件自己的容器宽度上，搬到哪都成立。

css

.card-wrap { container-type: inline-size; }

@container (min-width: 420px) {
  .card { grid-template-columns: 120px 1fr; }
}

不要一次全改。先把复用最多、位置最不固定的那几个组件迁过去，收益最明显；一次性铺开反而容易把断点搞乱。

容器查询的断点不能照抄媒体查询的值。它应该按组件自身「排不下」的临界宽度来定，通常是某个文字长度刚好放不下的位置。

登录后参与评论，你的发言会署上自己的名字。

陈默作者@chenmo2026-09-01

自己先补一句 —— 文中那几处踩坑的细节，备注里写得更全，需要的话我再展开。

童语@tongyu2026-09-02

边界情况那段写得好，很多问题都是顺利路径跑通了就当完成了。

严冬@yandong2026-09-03

状态管理这块我更倾向于能不放全局就不放，理解成本差很多。

程野@chengye2026-09-04

这份清单可以直接拿去做评审模板了，覆盖面挺全。

姜堰@jiangyan2026-09-05

命名那一条看着简单，但确实是评审里最常被提出来的问题。

唐棠@tangtang2026-09-06

有个疑问：这套做法在项目刚起步、还没什么历史包袱的时候，是不是反而更麻烦？

何知白@hezhibai2026-09-07

起步阶段确实可以先不上，等出现第二次同类问题再补流程也不迟。