容器查询非媒体查询升级版，而是根据组件自身容器宽度响应；需显式声明container-type并推荐命名，单位仅支持px/em/rem，不支持vw/%，嵌套时须防匹配冲突。
容器查询不是媒体查询的升级版，而是解决完全不同的问题：它让组件根据自身容器宽度响应，而不是盯着整个视口。直接替换传统 @media 断点不可行，但对卡片、网格项、侧边栏内嵌组件这类“会被塞进各种父容器”的元素，@container 是更精准的选择。
为什么 @container 不能直接替代 @media (min-width: 768px)
因为两者监听对象不同：@media 看的是视口宽度（比如用户缩放浏览器或 iframe 嵌入时，视口可能很宽，但你的卡片容器只有 300px）；@container 看的是该组件父级的 inline-size（即内容区宽度）。写 @container (min-width: 768px) 意味着“当这个卡片自己宽过 768px 才生效”，这在大多数卡片场景里根本不会触发——它们通常远小于此。
常见错误现象：
- 写了
@container规则但样式完全不生效，控制台也无报错 - 误用
vw单位，比如min-width: 50vw，结果规则被忽略（@container不支持vw、%） - 嵌套卡片中多个
container-type: inline-size未命名，导致子容器规则命中了外层容器
必须显式声明 container-type，否则 @container 彻底无效
浏览器不会自动把任意元素当作容器。没加这行，再多 @container 规则都等于没写。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给组件最外层包装元素加
container-type: inline-size（查宽度）或container-type: block-size（查高度），95% 场景用前者 - 推荐同时设
container-name: card，这样@container card (min-width: 300px)能精准匹配，避免嵌套冲突 - 不要写在
div或section这类泛型标签上，优先绑定到有语义的类名上，如.card { container-type: inline-size; }
断点值只能用 px、em、rem，别碰 vw 和百分比
@container 的单位逻辑和媒体查询相反：这里的 300px 指“容器自身内容区宽度 ≥ 300px”，不是“视口宽度”。所以 vw 在此语境下毫无意义，浏览器会直接丢弃整条规则。
实操建议：
- 断点值优先选
px（语义明确）或em（适配字体缩放），例如min-width: 24em相当于约 384px（按默认 16px 计算） - 避免用
clamp()或数学表达式，目前不支持 - 多条件用空格分隔，如
@container (min-width: 320px) and (max-width: 600px)，注意括号不能省
嵌套容器要小心层级匹配和命名冲突
如果一个卡片内部还有标签云组件，且两者都设了 container-type: inline-size，浏览器默认匹配“离目标元素最近的那个容器”。但如果都没命名，@container (min-width: 200px) 可能意外命中外层卡片，而非你期望的标签云。
最容易被忽略的一点是：命名容器（container-name）不是可选项，而是安全网。当你在复杂布局里调试某一层 @container 失效时，第一反应不该是检查语法，而是确认它是否被更外层同类型容器“劫持”了匹配权。
