CSS容器查询（@container）是唯一原生支持根据父容器尺寸而非视口调整样式的方案，需显式声明container-type（如inline-size）才能生效，且断点单位仅支持px/em/rem，不支持vw/vh/%及calc()等表达式。
能直接根据容器宽高调整样式，不用再靠视口断点硬套——@container 是目前唯一原生支持的方案，但必须配合 container-type 正确声明容器，否则规则完全不生效。
如何让一个元素变成可查询的容器
关键不是加个 class 就行，得显式告诉浏览器：“这个元素我要用来做尺寸判断”。最常用的是监听宽度变化：
-
container-type: inline-size—— 90% 的卡片、列表、侧边栏场景都用它，只响应宽度变化 -
container-type: size—— 同时监听宽高，但开销略大，且部分旧版 Safari 不稳定 -
container: card / inline-size—— 简写语法（Chrome 111+、Safari 16.4+ 支持），等价于同时设container-name和container-type - 别漏掉尺寸限制：如果父容器本身没固定宽或
max-width，@container可能永远收不到“变化”信号
@container 规则里哪些单位能用、哪些会失效
容器查询的断点单位和媒体查询不同，它基于容器自身尺寸计算，所以视口相对单位一律被忽略：
- ✅ 支持：
px、em、rem（推荐优先用px，语义明确、调试直观） - ❌ 无效：
vw、vh、%—— 写了也不会报错，但整条@container规则会被浏览器跳过 - ❌ 不支持表达式：
calc()、clamp()不能放在@container条件里，只能用在规则体内 - 多条件写法：
@container (min-width: 400px) and (max-width: 768px)，注意空格和括号必须严格匹配
嵌套容器时为什么样式没变？命名冲突是主因
当卡片里再套标签云、图表等子组件，又都设了 container-type: inline-size，@container 默认查的是“最近的”那个容器 —— 很可能不是你预期的外层卡片，而是子组件自己。
立即学习“前端免费学习笔记（深入）”；
- 不命名 = 靠谱性归零：省略
container-name时，浏览器按 DOM 深度就近匹配，极易误触 - 命名后必须显式引用：
@container card (min-width: 400px)，其中card必须和container-name: card完全一致（区分大小写） - 避免重名：同一页面多个卡片组件，别全叫
card，改用product-card、user-card更安全 - 不想命名？那就只在最外层容器设
container-type，内部用普通 class 控制，别层层“容器化”
兼容性兜底必须手动写，@supports 不够用
@supports (container-type: inline-size) 只能判断语法是否识别，但 Safari 16.4 之前、Firefox 当前稳定版仍需手动开启实验标志，实际用户环境里规则大概率静默失效。
- 降级样式必须写在
@container外面：比如默认用flex-direction: column，再在@container里覆盖为row - 不要依赖 JS 检测：CSS 容器查询是纯渲染层能力，JS 无法准确模拟容器尺寸变化时机
- 真要兼容 IE/老安卓？只能退回媒体查询 + BEM 类名组合，例如
.card--sm/.card--md手动控制
真正难的不是写对 @container 语法，而是想清楚“这个容器到底该由谁来定义”——是卡片外层 wrapper？还是整个 grid item？定义层级错了，后面所有断点都会偏移。
