@container 规则需显式声明 container-type: inline-size 或 size 才生效，否则静默失效；常见错误包括缺 type、父元素无布局盒、内联元素未转块级、flex/grid 子项直设容器、容器尺寸不可测等。
container-type 必须显式声明，否则 @container 完全不生效
浏览器默认不会把任何元素当作容器，@container 规则静默失效是常态——控制台不报错、DevTools 里也看不出异常，但样式就是不应用。核心条件只有两个：container-type: inline-size（最常用）或 container-type: size，缺一不可。
常见踩坑点：
- 只写了
container-name: card，没配container-type→ 查询永远不触发 - 给
display: contents或position: absolute的父元素设container-type→ 属性被忽略，因为它们不生成布局盒 - 对
<span></span>这类内联元素直接设container-type→ 尺寸不可测，必须先加display: block或display: flow-root - 在
display: flex或display: grid的直接子项上设容器 → 无效；需额外包一层 wrapper，并确保该 wrapper 有稳定尺寸（如加min-width: 0）
父容器宽度必须可测量，否则查询条件永不满足
即使 container-type 写对了，如果容器本身宽度无法稳定计算，@container 依然不会响应。关键不是“有没有宽”，而是“浏览器能不能可靠拿到它”。
典型不可测场景：
- 父容器是
float或position: absolute→ 脱离文档流，尺寸无锚点 - 父容器仅靠内容撑开，且未设
width、max-width或flex-basis→ 浏览器无法在布局前确定其inline-size - 父容器是 Grid/Flex 子项，但父级 Grid/Flex 没设约束（如
grid-template-columns或flex: 1）→ 尺寸由算法动态分配，非静态可查
稳妥做法：给 wrapper 加 contain: layout style size，既隔离子内容影响，又确保尺寸上下文稳定；避免用 contain: content，它不包含尺寸隔离能力。
@container 和 @media 职责必须分清，不能嵌套混用
@container 不是 @media 的替代品，也不是升级版。前者管组件内部细节（比如卡片图文方向、按钮图标显隐），后者管页面结构（比如导航栏折叠、网格列数切换）。混用没问题，但嵌套就出问题。
错误写法示例：
@media (min-width: 768px) {
@container (min-width: 400px) {
.card { display: flex; }
}
}
后果：
- 组件失去独立性——它的行为被视口和容器双重绑定
- Safari 下可能因解析顺序失效（尤其 16.4 版本对命名容器有兼容问题）
- 微前端或 CMS 动态区块中，子组件无法脱离主应用断点规则运行
移动端组件该用哪些单位和 fallback 策略
移动端常用容器单位：1cqw = 容器宽度的 1%，适合文字缩放、间距等比调整；cqi/cqb 在折叠屏中较少用，目前兼容性弱，暂不推荐。
fallback 必须主动写，不能只靠 @supports 包裹——因为旧浏览器忽略整个 @container 块，但不会报错，结果是组件卡在默认样式。
稳妥做法是先写一套 @media 基础适配，再用 @container 覆盖更细粒度场景：
.card-content { font-size: 0.875rem; }
@container card (max-width: 320px) {
.card-content { font-size: 0.75rem; }
}
真正容易被忽略的是容器尺寸计算时机——它基于渲染后的最终尺寸，如果组件初始 display: none 或 visibility: hidden，容器查询不会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
