容器查询需显式设置container-type，否则@container规则静默失效；常见错误包括漏设type、在非bfc元素或flex/grid子项上直接设、混淆@media与@container职责、tailwind配置不全及断点区间缺失。
容器没设 container-type，@container 就是摆设
浏览器默认不把任何元素当容器，@container 规则静默失效是常态，控制台也不会报错。必须显式声明：container-type: inline-size（最常用）或 container-type: size。
常见漏项：
- 只写
container-name: card，没配container-type—— 完全不触发 - 对
display: contents或position: absolute的父元素设container-type—— 属性被忽略，因为它们不产生块格式化上下文（BFC） - 容器本身是
inline元素（如<span></span>）—— 尺寸不可测，必须用display: block或flow-root等建立 BFC
Flex/Grid 子项不能直接当容器，得加一层 wrapper
直接在 display: flex 或 display: grid 的父元素上设 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> - 若 wrapper 是 Flex 子项，还需防父级压缩：加
min-width: 0或width: fit-content
@container 和 @media 别混职责，更别嵌套写
二者不是替代关系，而是分层协作：@media 管全局布局变化（比如整页列数、导航栏折叠），@container 管组件内部排布（比如卡片图文方向、列表图标显隐）。
典型错误：
- 在
@media (min-width: 768px)里再套@container (min-width: 400px)—— 组件失去独立性，Safari 下可能因解析顺序失效 - 用
@media控制侧边栏是否显示，却指望同一张卡片靠它响应 —— 卡片实际容器宽度已变，但视口没变，@media压根不响应 - 折叠屏场景下，只依赖
@media切换断点 —— 展开后视口宽 672px，但侧边栏容器仍只有 320px，卡片样式错乱
Tailwind 用户：插件要开、层要包、类要预定义
Tailwind 的容器查询支持不是开箱即用的，三处配置缺一不可：
- 在
tailwind.config.js中启用实验特性：experimental: { containerQueries: true } - 安装并注册插件：
plugins: [require('@tailwindcss/container-queries')] -
@container规则不能写在 CSS 全局顶层，必须包裹在@layer components { }或@layer utilities { }内 - HTML 中必须存在带
container类的元素（如<div class="container">），否则插件找不到锚点 <li>不支持 <code>@apply调用容器查询类，也不能用className动态传参，所有断点类必须提前在 CSS 中定义好
真正容易被忽略的是尺寸跳变和区间断层：比如只写 @container (min-width: 500px)，而容器从 360px 直接跳到 680px，中间那段就永远进不去。用区间写法（min-width: 320px and max-width: 479px）+ 实测设备报告的渲染宽，比硬编码 768px 更可靠。
