container-type 必须显式声明为 inline-size、size 或 normal 才能启用容器查询，否则 @container 规则被忽略；container-name 可选但推荐命名以避免冲突；需兼容 @media 回退且注意布局时机影响查询触发。
container-type 必须显式声明，否则容器查询无效
容器查询不会自动生效，container-type 是启用它的前提。没有它，@container 规则会被浏览器完全忽略——连语法错误都不会报。常见错误是只写了 container-name 却漏掉 container-type，结果样式死活不触发。
必须指定为 inline-size（最常用）、size 或 normal：
.card {
container-type: inline-size;
container-name: card;
}inline-size 基于容器的行内方向宽度（通常是 width），适用于绝大多数响应式卡片、列表项；size 同时监听宽高，但目前仅 Chromium 111+ 支持且有性能开销；normal 不启用查询能力，仅用于取消继承。
@container 查询语法和断点写法与 @media 几乎一致
@container 的条件写法和 @media 高度相似，但作用域限定在容器内部，且单位默认是容器自身的尺寸（不是视口）。
立即学习“前端免费学习笔记（深入）”；
- 断点值不加单位会报错：
(min-width: 400)❌，必须写(min-width: 400px)✅ - 支持
width、inline-size、block-size，推荐优先用inline-size保持语义一致 - 可嵌套：容器内元素的子容器也能定义自己的
container-type，形成多层查询链
示例：当卡片容器宽度 ≥ 480px 时调整标题字体大小
@container card (min-inline-size: 480px) {
.card h2 {
font-size: 1.5rem;
}
}container-name 不是必需的，但命名能避免样式污染和冲突
如果不设 container-name，所有声明了 container-type 的容器都匹配无名查询 @container (min-width: ...)，容易误触。尤其在组件库或多人协作项目中，未命名的容器可能被全局查询意外影响。
命名建议：
- 用语义化小写短名，如
card、sidebar、teaser - 避免通用词如
container或wrap，降低冲突概率 - 支持空格分隔多个名字：
container-name: card featured;，对应查询可写@container card (min-width: ...)或@container featured (min-width: ...)
注意：container-name 不能含特殊字符或数字开头，且区分大小写。
浏览器兼容性仍需兜底，不能完全替代媒体查询
Chrome 105+、Edge 105+、Safari 16.4+ 支持，Firefox 当前（127）仍需手动开启 layout.css.container-queries.enabled 标志。这意味着生产环境必须保留 @media 回退逻辑。
典型兜底模式：
.card h2 {
font-size: 1.25rem; /* 默认 */
}
<p>@media (min-width: 480px) {
.card h2 {
font-size: 1.5rem; /<em> 回退 </em>/
}
}</p><p>@container card (min-inline-size: 480px) {
.card h2 {
font-size: 1.5rem; /<em> 容器查询生效时覆盖 </em>/
}
}真正容易被忽略的是：容器查询依赖布局完成才能计算尺寸，如果容器高度由内容撑开、且内部有异步加载的图片或 iframe，首次查询可能因尺寸未稳定而延迟触发——这时需要配合 container-type: size 或 JS 强制重排，但代价是性能下降。
