默认需为父容器设置 container-type: inline-size 才启用容器查询，否则 @container 规则被忽略；@container 基于父容器尺寸（如 min-width）响应式控制子元素样式，不作用于父容器自身。
容器查询（container query）怎么启用
默认情况下，CSS容器查询不会生效，必须先给父容器显式声明 container-type。不加这句，所有 @container 规则都会被浏览器忽略——连报错都不会有，这是最容易卡住的地方。
常见写法是：
avatar-list {
container-type: inline-size;
}注意别用 container-type: size，它要求同时满足宽高约束，而头像布局通常只关心宽度变化；inline-size 更贴合行内流式场景。
如果父容器是 flex 或 grid 子项，还要确认它没被设置 contain: layout paint 之类干扰容器查询的值——这些会切断容器尺寸信息传递。
@container 规则里怎么写响应式头像尺寸
和媒体查询不同，@container 的条件基于父容器的尺寸，不是视口。写法更直接：用 min-width / max-width 指定父容器宽度阈值，然后在里面改子元素样式。
例如头像在卡片中随卡片缩放：
立即学习“前端免费学习笔记（深入）”；
@container (min-width: 300px) {
.avatar {
width: 48px;
height: 48px;
}
}
@container (min-width: 600px) {
.avatar {
width: 64px;
height: 64px;
}
}
关键点：
-
@container条件括号里不能写单位以外的表达式，比如不支持(width > 300px)，只能用min-width、max-width、width - 多个规则会按顺序匹配，后写的会覆盖前面的（层叠逻辑和普通 CSS 一致）
- 不要试图在
@container里改父容器自身尺寸——它只作用于后代，且父容器尺寸是查询基准，不能反向影响自己
为什么头像没响应？常见断点失效原因
最常遇到的是“写了 @container 但完全没反应”，大概率是以下三个之一：
- 父容器缺少
container-name，而你用了具名查询（如@container card (min-width: 400px)）——此时必须同步加container-name: card - 父容器本身宽度为
auto且没有设定最大宽度或 flex/gird 约束，在文档流中实际宽度始终撑满，导致容器查询永远只匹配最大那条规则 - 头像元素用了
flex-shrink: 0或固定min-width，硬性锁死了尺寸，容器查询改了width也拉不动
调试建议：在 DevTools 里选中父容器，看 computed 面板是否有 container-type 生效；再选中头像，看 @container 规则是否出现在 styles 面板里（灰色表示未匹配，黑色表示已应用）。
和媒体查询比，容器查询对头像布局的实际优势
当多个头像卡片并列，且每张卡片宽度由网格列宽动态决定时，媒体查询会失效——因为所有卡片共享同一视口宽度，但它们各自的容器宽度可能完全不同。
容器查询让每个卡片独立响应自身宽度，比如：
- 左侧窄栏里头像缩到 32px
- 右侧主栏里头像保持 64px
- 同一个页面、同一套 CSS，无需 JS 计算或额外 class
但要注意：目前 Safari 16.4+、Chrome 105+、Firefox 110+ 才稳定支持，旧版本需降级为媒体查询 + JS 监听 ResizeObserver 模拟。真正落地前，务必检查目标环境的 container-query 支持数据。
