@container查询需显式声明container-type: inline-size才能生效，否则静默失效；容器必须具备稳定可测的content box宽度，且不能脱离文档流或被flex/grid压缩，命名非必需但有助于避免冲突。
@container 查询不是写了就生效的语法糖，它必须配合 container-type: inline-size 才能启动，否则整条规则静默失效——这是 90% “不生效”问题的根源。
为什么写了 @container 却完全没反应
浏览器默认不把任何元素当可查询容器，@container 规则不会报错，也不会警告，只是被直接忽略。
- 必须在父元素上显式写
container-type: inline-size（或size），container-name单独存在无效 - 父元素不能是
display: inline、float: left、position: absolute或display: contents—— 这些会让它脱离文档流，尺寸不可测 - 若父元素是 Flex/Grid 子项，常因
min-width: auto被压缩，需加min-width: 0或width: fit-content释放测量能力 - 不要指望
div标签自带容器资格：哪怕它有width: 300px，没container-type就不算数
@container 查的到底是什么尺寸
它查的是「内容区可用的行内尺寸」（content box width），不是 CSS 的 width 值，也不是 offsetWidth。
- 受
padding、border和box-sizing直接影响：比如width: 352px; padding: 16px; box-sizing: border-box→ content box 宽 = 320px，此时@container (min-inline-size: 320px)才匹配 - 只支持
px、vw、%（仅当父容器本身有明确百分比宽时才可靠），禁用em、rem，行为未定义 -
gap不计入inline-size，但padding和border会计入；推荐统一用box-sizing: border-box预估更稳
Flex/Grid 容器里怎么让子组件响应自身宽度
直接给 display: flex 或 display: grid 的父容器加 container-type 是无效的——它的子项尺寸由布局算法动态分配，不是自然可测的边界。
- ✅ 正确做法：在 Flex/Grid 的直接子元素上设容器，例如
.card-wrapper包裹.card，并在.card-wrapper上写container-type: inline-size - ❌ 错误写法：
<div class="grid"><div class="card" style="container-type: inline-size"></div></div> - 如果要用 Tailwind，确认
tailwind.config.js启用了experimental: { containerQueries: true }，插件已注册，并且@container规则包裹在@layer components { }内
命名 container-name 到底要不要设
命名不是必需的，但能避免冲突和误触发，尤其在组件嵌套或复用场景下。
- 匿名查询（不设
container-name）只匹配最近的、满足container-type的祖先，适合单层结构 - 多个同类组件并列时，若都用相同
container-name: card，所有同名容器会同时响应；要么用唯一值（如card-1），要么干脆省略名字改用匿名 - 推荐语义化命名，比如
container-name: stat-panel或container-name: sidebar-nav，便于调试和协作
最易被忽略的点是：容器查询不继承、不冒泡，只认直接父级。从目标元素往上找，第一个没设 container-type 的祖先，就是查询作用域的终点——中间断一环，整个链就废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
