@container 规则依赖容器具备可测的 inline-size，必须设置 container-type: inline-size 才生效；仅命名或忽略容器显示模式、布局上下文会导致查询失效。
@container 规则本身不直接适配小屏幕，它适配的是组件容器的尺寸——而小屏幕下容器往往更窄，所以关键不是“写什么查询”，而是让容器在小屏幕里仍能被正确测量并触发查询。
container-type: inline-size 是唯一可靠起点
漏掉这行，@container 就是死代码：浏览器根本不会识别该元素为容器，控制台不报错、DevTools 里也看不出异常，样式就是不生效。
-
container-type: inline-size是目前唯一稳定可用的类型；container-type: size开销大、兼容差（Chromium 117+ 才支持且需 flag），container-type: block-size在没contain: size时永远查不到高度 - 不能只写
container-name: card—— 名字只是可选标识，没有container-type，名字毫无意义 - 内联元素（如
<span>）必须先加display: block或display: flow-root，否则container-type被静默忽略
容器必须有可测宽度，否则查询永不触发
小屏幕下容器常因父级布局失控而宽度为 0px，此时哪怕写了 @container (min-width: 320px) 也永远不会匹配。
- Flex/Grid 直接子项不能当容器：比如
<div class="grid"><div class="card">中的.card，必须额外包一层<div class="card-wrapper">，并加min-width: 0或width: fit-content - 浮动（
float）、绝对定位（position: absolute）的父元素不生成布局盒，container-type失效 - 仅靠内容撑开、又没设
width/max-width/flex-basis的容器，浏览器无法在布局前确定其inline-size，测量结果为0
@container 内的选择器只能作用于后代，不能选容器自己
这是和 @media 最本质的区别：你不能在 @container 块里写 .card { ... } 来改容器自身样式，它只影响内部子元素。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@container (min-width: 320px) { .card { display: flex; } }——.card是容器本身，这条规则无效 - 正确写法：
@container (min-width: 320px) { .card .title { font-size: 1.1rem; } } - 如果真要改容器自身，得提前在容器上设好类，再用普通 CSS 控制，比如
.card.compact { ... }，然后靠 JS 或状态类切换
调试时务必确认“Container query container”已勾选
打开 DevTools，选中你认为是容器的元素，在右侧 Layout 面板里找 “Container query container” 是否打钩。没勾，说明它没被识别为容器——不是语法错，是上下文缺失。
- 临时加
outline: 1px solid red看它是否真实渲染且有宽度 - 检查是否被更高优先级规则覆盖（比如某个
!important把container-type干掉了） - 多个嵌套容器时，
@container默认匹配最近的那个；若想精确控制，必须用container-name显式命名并引用，比如@container card (min-width: 320px)
真正难的从来不是写几行 @container，而是让那个父元素在各种布局上下文里都稳稳地拥有一个浏览器能测出来的宽度——尤其在小屏幕的 Flex/Grid 侧边栏、弹窗、CMS 区块里，这点最容易被忽略。
