@container规则不生效主因是父容器未设container-type: inline-size；必须显式声明，且仅支持px/em单位、需命名避免嵌套冲突、兼容性限chrome/edge/safari。
@container 规则不生效，八成是父容器没设 container-type —— 浏览器根本不会把它当容器查，写了也白写。
为什么 @container 写了却没反应
最常见的情况是：只写了查询规则，但卡片外层容器压根没声明自己“可被查询”。@container 不是语法糖，它依赖显式授权。
- 必须在卡片直接父元素（比如
.card-wrapper）上设置container-type: inline-size；漏掉这句，整条@container规则会被浏览器静默忽略 -
container-type: size或block-size在 Safari/Firefox 中支持不稳定，折叠屏或 iOS 项目中建议只用inline-size - 别套在
display: contents或display: none元素上——它们不生成布局盒，无法测量尺寸 - Flex/Grid 容器本身不适合直接设
container-type，因为子项宽度常为 0；应确保容器有明确宽度来源（如width、max-width，或处于受约束的 Grid/Flex 子项中）
@container 断点单位只能用 px 或 em，不能用 vw 或 %
这是和 @media 最容易混淆的一点：容器查询的基准是容器自身尺寸，不是视口。所以 vw、% 这类相对视口的单位在 @container 里直接失效，整条规则跳过。
- 正确写法：
@container card (min-width: 320px)或@container card (min-width: 24em) - 推荐优先用
px：语义清晰、兼容性好；em可用于字体相关断点，但要注意继承链中的font-size变化 -
clamp()、calc()等计算表达式目前不支持，写进去也不会生效 - 多条件用空格分隔：
@container card (min-width: 400px) and (max-width: 600px)
必须用 container-name 避免嵌套冲突
匿名查询（不设 container-name）只匹配最近的、满足 container-type 的祖先。一旦组件嵌套或复用，很容易命中错误层级。
- 比如卡片内嵌标签云，两者都设了
container-type: inline-size且都没命名，那么@container (min-width: 300px)可能查的是标签云自己的宽度，而非卡片容器 - 外层容器设
container-name: card，内层设container-name: tag-cloud，查询时明确指定：@container card (min-width: 300px) - 多个同类卡片并列时，名字重复会导致所有同名容器同时响应；要么用唯一值（如
card-1），要么省略名字改用匿名查询（仅限单层结构）
移动端折叠屏适配要避开 @media 混用陷阱
折叠屏典型场景是：同一页面中，左侧导航收缩、右侧内容区拉伸。这时 @media 只能监听整个视口变化，而 @container 才能让卡片“看自己”——这才是局部响应式的本质。
- 不要在
@container外再套一层@media做“双重保险”，这会破坏容器查询的独立性，反而让逻辑变模糊 - 如果卡片由 Vue/React 动态挂载，确保
container-type和container-name在元素首次渲染完成时已存在；JS 插入后才加样式会导致首屏不生效 - 当前兼容性：Chrome 110+、Edge 110+、Safari 16.4+ 支持；Firefox 尚未支持，线上项目务必提供降级方案（例如 fallback 到
@media (min-width: 320px)）
真正难的不是写对语法，而是意识到：容器查询不是媒体查询的替代品，而是另一种作用域——它把样式控制权从“页面级”移交到“组件级”。一旦嵌套层级变深、命名没管住、单位用错，就立刻退化成不可预测的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
