container-type: inline-size 是唯一实用的取值，其他如 size、normal、block-size 均存在兼容性差或触发条件苛刻等问题；必须显式设置，否则 @container 规则静默失效。
container-type: inline-size 是唯一实用的取值
不设 container-type: inline-size，@container 规则就完全不生效——浏览器静默忽略，连控制台警告都没有。它不是可选配置，是硬性前提。
常见错误现象：@container (min-width: 400px) { .item { flex-direction: row; } } 写了但没反应，十有八九是父容器漏了这行：
.card {
container-type: inline-size;
}container-type: size 要求宽高同时变化才触发，在 Flex/Grid 布局中极难稳定命中；container-type: normal 等于没开；container-type: block-size 对高度响应支持差，Safari 和旧版 Chrome 基本不可靠。
别在 :root 或 body 上试——它们默认不是格式化上下文，绝大多数浏览器下无效。用 <div class="card"> 这类常规块级元素最稳。
立即学习“前端免费学习笔记（深入）”；
@container 规则里只能用 min-width / max-width，不能用 width
@container (width: 400px) 是精确匹配，实际中几乎无用：容器宽度极少刚好卡在某个整数值上，且无法覆盖“≥”或“≤”这类响应式逻辑。
真正该用的是：
-
@container (min-width: 400px)：适合渐进增强，比如窄时单列、宽时双列 -
@container (max-width: 360px)：适合紧凑态降级，比如按钮从横向排布切为纵向
注意：@container (min-width: 300px) and (max-width: 480px) 这种写法在部分 Chromium 版本中会被直接忽略，解析行为不稳定，应拆成两个独立规则。
单位只支持 px、em、rem，不支持 %（50% 表示“容器自身宽度的 50%”，恒为真）、vw（语法错误）、calc()（不被解析）。
Flex/Grid 子项当容器时，容易被父布局压扁
把 container-type: inline-size 加在 Flex 或 Grid 的直接子项上是可行的，但极易踩坑：
- 如果父 Flex 容器没设
min-width，又启用了flex-shrink: 1，这个子项可能被压缩到几像素宽，@container查到的宽度远小于视觉所见 - Grid 子项若设了
grid-column: span 2，但父 Grid 没配grid-template-columns，容器宽度可能由内容撑开，导致查询失效 -
display: contents或display: none的元素上设container-type会静默失效
调试方法：在 DevTools 中选中目标容器 → Elements 面板右侧 Layout 标签页 → 查看 “Container query container” 是否打钩；未勾选说明声明没生效。
调整内部布局时，优先用 clamp() + auto-fit，少硬切列数
仅靠 @container 切换 grid-template-columns: repeat(2, 1fr) → repeat(3, 1fr)，容易导致列宽突变、文字折行严重或空白间隙错位。
更平滑的做法是把列数逻辑交给 Grid 自身：
grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 100% - 2rem, 320px), 1fr));
这样单列最小宽度随容器弹性变化，比固定列数更适应内容。
如果必须精确控制（如“≥500px 显示 3 列”），仍可用 @container，但列宽建议保留弹性：repeat(3, minmax(200px, 1fr))，并配上 gap 防止窄容器里间隙撑爆布局。
注意兼容性：container 简写语法（如 container: inline-size）需 Chrome 111+、Safari 16.4+；Firefox 126 仅支持基础 @container，不支持 inline-size 限定。
