不能只加@container，必须重写容器声明逻辑、隔离尺寸上下文、放弃视口断点依赖；90%失败因父容器未设container-type: inline-size，导致规则静默失效。
直接说结论：不能只加@container就完事，必须重写容器声明逻辑、隔离尺寸上下文、放弃对视口断点的依赖——否则组件在嵌套、动态网格或微前端里照样崩。
为什么@container写了却没反应？
90% 的失败案例都卡在这一步：父容器没声明container-type: inline-size。浏览器不会自动把任意元素当容器，@container规则静默失效，控制台不报错，DevTools 里也看不出异常。
- 只写了
container-name: card，漏掉container-type→ 查询永远不触发 - 给
display: contents或position: absolute的元素设container-type→ 属性被忽略（不生成布局盒） - 用
span或div默认内联行为 → 必须先加display: block或display: flow-root - 容器是
flex/grid的直接子项，但父级没设min-width: 0或flex-basis→ 尺寸不可测
怎么改写组件 wrapper 才真正可复用？
传统组件库常把样式写死在.card上，重构时得把“容器资格”明确交给语义最接近边界的 wrapper，而不是强行塞进 Block 根节点。
- 推荐结构：
<div class="card-wrapper"><div class="card">...</div></div>，container-type加在.card-wrapper上 - 必须加
contain: layout style size，不是contain: content——后者不隔离尺寸计算 - 避免
overflow: clip或overflow: hidden，它们会截断布局测量，导致宽度被算成 0 - 命名容器（如
container-name: card）比匿名更稳妥，尤其在多个同类组件并列时防冲突
@container和@media怎么分工才不翻车？
混用可以，嵌套不行。两者不是替代关系，而是职责分层：视口管“在哪”，容器管“怎么长”。
-
@media负责页面级结构切换：导航栏折叠、主/侧边栏比例、全局字体缩放 -
@container只管组件内部形态：卡片图文方向、按钮图标显隐、表格列数随可用宽度增减 - 绝对禁止：
@media块里嵌@container——Safari 16.4+ 对命名容器解析不稳定，微前端中子组件会失去独立性 - 兜底写法：先写一套
@media基础适配，再用@container覆盖细粒度场景，比如.card-content字号先按视口设，再按容器宽微调
移动端和微前端里最容易被忽略的坑
真正要命的不是语法写错，而是尺寸计算时机和上下文污染。
- 容器初始
display: none或visibility: hidden→@container完全不生效（它基于渲染后尺寸） - 在 CMS 或低代码平台里，组件可能被插入
iframe或shadow DOM→ 需确认宿主环境是否支持 Container Queries（Chrome 128+ / Safari 17.5+ / Firefox 127+ 开启标志） - BEM 中严禁给
.card__content这类 Element 加container-type——它不构成独立布局上下文 - JS 里读取容器状态不能靠
getBoundingClientRect()轮询，要用ResizeObserver监听，且 observer 目标必须是带container-type的元素本身
最后强调一点：Container Queries 不是“让旧组件变聪明”的胶水，它是新组件的设计契约——从第一行 HTML 就得考虑容器边界、尺寸可测性、上下文隔离。跳过这步，后面所有@container都是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
