如何用CSS容器查询替代部分传统断点写法？

容器查询非媒体查询升级版，而是根据组件自身容器宽度响应；需显式声明container-type并推荐命名，单位仅支持px/em/rem，不支持vw/%，嵌套时须防匹配冲突。

容器查询不是媒体查询的升级版，而是解决完全不同的问题：它让组件根据自身容器宽度响应，而不是盯着整个视口。直接替换传统 @media 断点不可行，但对卡片、网格项、侧边栏内嵌组件这类“会被塞进各种父容器”的元素，@container 是更精准的选择。

为什么 @container 不能直接替代 @media (min-width: 768px)

因为两者监听对象不同：@media 看的是视口宽度（比如用户缩放浏览器或 iframe 嵌入时，视口可能很宽，但你的卡片容器只有 300px）；@container 看的是该组件父级的 inline-size（即内容区宽度）。写 @container (min-width: 768px) 意味着“当这个卡片自己宽过 768px 才生效”，这在大多数卡片场景里根本不会触发——它们通常远小于此。

常见问题表现：

1. 写了 @container 规则但样式完全不生效，控制台也无报错
2. 误用 vw 单位，比如 min-width: 50vw，结果规则被忽略（@container 不支持 vw、%）
3. 嵌套卡片中多个 container-type: inline-size 未命名，导致子容器规则命中了外层容器

必须显式声明 container-type，否则 @container 彻底无效

浏览器不会自动把任意元素当作容器。没加这行，再多 @container 规则都等于没写。

实操建议：

1. 给组件最外层包装元素加 container-type: inline-size（查宽度）或 container-type: block-size（查高度），95% 场景用前者
2. 推荐同时设 container-name: card，这样 @container card (min-width: 300px) 能精准匹配，避免嵌套冲突
3. 不要写在 div 或 section 这类泛型标签上，优先绑定到有语义的类名上，如 .card { container-type: inline-size; }

断点值只能用 px、em、rem，别碰 vw 和百分比

@container 的单位逻辑和媒体查询相反：这里的 300px 指“容器自身内容区宽度 ≥ 300px”，不是“视口宽度”。所以 vw 在此语境下毫无意义，浏览器会直接丢弃整条规则。

实操建议：

1. 断点值优先选 px（语义明确）或 em（适配字体缩放），例如 min-width: 24em 相当于约 384px（按默认 16px 计算）
2. 避免用 clamp() 或数学表达式，目前不支持
3. 多条件用空格分隔，如 @container (min-width: 320px) and (max-width: 600px)，注意括号不能省

嵌套容器要小心层级匹配和命名冲突

如果一个卡片内部还有标签云组件，且两者都设了 container-type: inline-size，浏览器默认匹配“离目标元素最近的那个容器”。但如果都没命名，@container (min-width: 200px) 可能意外命中外层卡片，而非你期望的标签云。

最容易被忽略的一点是：命名容器（container-name）不是可选项，而是安全网。当你在复杂布局里调试某一层 @container 失效时，第一反应不该是检查语法，而是确认它是否被更外层同类型容器“劫持”了匹配权。