@container规则不触发最常因容器缺失container-type声明或尺寸不可测：必须显式设container-type: inline-size/size，且容器不能为inline/float/absolute；Flex/Grid子项还需防父级压缩，加min-width: 0等修复。
容器查询不是“写了就生效”的语法糖，它依赖明确的尺寸上下文和浏览器对 container-type 的识别；没效果时，90% 是容器没建立可测量边界，而不是写法错。
为什么 @container 规则完全不触发
最常被忽略的前提：容器元素必须同时满足两个硬性条件——有 container-type 声明，且自身具备稳定可测的尺寸。缺一不可。
-
container-type: inline-size或container-type: size必须显式设置，仅用container-name不起作用 - 容器不能是
display: inline、float或position: absolute—— 这些会脱离文档流，导致尺寸不可测 - 若容器是 Flex/Grid 子项，父容器可能压缩其宽度（如
flex: 1或min-width: 0），此时需给该容器加min-width: 0或width: fit-content - 某些旧版 Chrome（display: contents 元素上启用容器查询，会静默忽略
Flex/Grid 容器里怎么让子组件响应自身宽度
直接在 display: flex 父元素上设 container-type 是无效的——它的子项尺寸由算法分配，不是自主可测的“容器”。正确做法是把查询逻辑下移到子项的包装层。
- 不要：
<div class="grid"><div class="card" style="container-type: inline-size">...</div></div> - 要：
<div class="grid"><div class="card-wrapper" style="container-type: inline-size"><div class="card">...</div></div></div> -
gap不计入inline-size，但padding和border会计入，box-sizing: border-box更利于尺寸预估 - 为防内容撑开后尺寸跳变，建议搭配
contain: layout style size，尤其在 JS 动态插入内容时
Tailwind 用户为什么 @container 类没生成样式
Tailwind 的容器查询插件不是自动激活的，它依赖配置开关、插件注册和 CSS 层级三重确认。
立即学习“前端免费学习笔记（深入）”；
- 必须在
tailwind.config.js中开启experimental: { containerQueries: true } - 插件需安装并显式注册：
plugins: [require('@tailwindcss/container-queries')] -
@container规则不能写在全局 CSS 顶层，必须包裹在@layer components { }或@layer utilities { }内 - HTML 中必须有带
container类的元素（如<div class="container max-w-4xl">），否则插件找不到查询锚点 - 不支持在
@apply中调用容器查询类，也不能用className直接传参，必须提前在 CSS 中定义好命名规则
折叠屏或动态容器下如何避免响应断层
折叠屏展开瞬间，容器宽度可能从 360px 跳到 680px，如果只设单一阈值（如 min-width: 500px），中间那段尺寸永远无法命中。
- 用区间写法替代单点判断：
@container (320px <= inline-size < 480px)和@container (inline-size >= 480px) - 确保
<meta name="viewport">是动态的，不能硬编码width=320；折叠屏 WebView 可能卡在折叠态 viewport，导致容器尺寸计算基准错误 - 真机调试不可省——DevTools 设备模拟只改 viewport，不触发真实容器重排
- 用
@supports (container-type: inline-size)做降级，避免不支持环境白屏或布局错乱
真正难的从来不是语法，而是让容器「尺寸稳定」——它既受 CSS 布局模型约束，又被 JS 动态内容扰动，还可能被框架的渲染机制掩盖。每次查不到效果，先检查容器有没有真正“立住”。
