容器查询需显式声明container-type，否则@container无效；断点仅支持px/em/rem，不支持vw/%；嵌套时应命名容器避免层级冲突；旧浏览器需用媒体查询兜底，不可依赖@supports单一检测。
容器查询需要显式声明容器，否则@container规则无效
浏览器不会自动把任意元素当作容器——必须用container-type（或简写的container）显式声明。没加这行，写再多@container样式也完全不生效，控制台也不会报错，容易误以为语法错了。
常见做法是给组件外层包裹元素设为inline-size容器：
article.card {
container-type: inline-size;
container-name: card;
}
注意两点：
• inline-size查宽度，block-size查高度，多数场景用前者就够了
• container-name可选，但命名后能精准匹配，避免嵌套时规则意外触发
@container的断点单位只能用px、em、rem，不支持vw或百分比
这是和媒体查询最易混淆的一点：容器查询的尺寸基于容器自身，不是视口，所以vw、%这类相对视口的单位在@container里直接被忽略，解析为无效规则。
正确写法示例：
@container card (min-width: 300px) {
.card-title { font-size: 1.25rem; }
}
@container (min-width: 20em) {
/* 无名容器也能查，但需确保父级已设 container-type */
.card-body { padding: 1rem; }
}
要点：
• 断点值推荐用px或em，语义清晰且兼容性好
• 不要试图用clamp()或计算表达式，目前不支持
• 多条件用空格分隔，如(min-width: 400px) and (max-width: 600px)
嵌套容器需注意层级与命名冲突，否则规则可能被跳过
如果一个元素既是子容器又是父容器（比如卡片内有标签云），又都用了container-type: inline-size，浏览器会按 DOM 深度优先匹配最近的容器——但若未命名，@container可能命中错误层级。
稳妥做法：
- 外层容器设
container-name: card，内层设container-name: tag-cloud - 查询时明确指定名称：
@container card (min-width: 320px)，避免歧义 - 不想命名？那就只在最外层设
container-type，内部用普通类控制样式，别让每个盒子都成容器
否则可能出现：明明卡片宽度缩了，标签云的样式却没变——其实是@container查的是标签云自己的宽度，而非卡片的。
旧浏览器不支持容器查询，降级方案不能只靠@supports
@supports (container-type: inline-size)能检测语法支持，但 Safari 16.4+ 和 Chrome 110+ 才稳定支持，Firefox 仍需手动开启实验标志。更麻烦的是：即使检测通过，某些 CSS 属性（比如aspect-ratio配合容器查询）在部分版本仍有渲染延迟或错位。
实用降级策略：
- 基础布局用传统媒体查询兜底，容器查询仅增强细节（如字体大小、间距微调）
- 避免在容器查询中做关键布局切换（比如
display: grid→flex），这类逻辑仍走@media - 用
class手动模拟状态，例如加载时加is-container-small类，JS 监听ResizeObserver更新它
真正难处理的不是“不支持”，而是“部分支持”——比如容器尺寸读取不准、查询条件响应滞后，这些在复杂滚动容器里尤其明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
