Container Queries 比 media query 更适合响应元素宽度，因其监听父容器尺寸而非视口；需显式设置 container-type（如 inline-size）启用，且父容器须有明确尺寸约束；@container 内不能直接声明 CSS 变量，须通过选择器设置；兼容性需 @supports 检测，Safari 16.4 不支持斜杠命名语法。
Container Queries 为什么比 media query 更适合响应元素宽度
媒体查询（@media）监听的是视口宽度，无法感知单个组件内部尺寸变化。当你把一个卡片组件从 sidebar 拖进 main content 区域时，它的宽度变了，但 @media 完全无感——它只管屏幕宽窄，不管容器大小。
而 @container 查询直接绑定在父容器上，只要该容器启用了 container-type，子元素就能基于它的尺寸做样式响应。这正是动态更新 CSS 变量（比如 --card-padding 或 --grid-cols）的前提。
关键点：不是所有父元素默认支持 container query，必须显式声明 container-type，否则查不到尺寸。
如何正确启用 container-type 并触发容器查询
浏览器不会自动把某个 div 当作容器来监听，必须手动设置 container-type 属性。常见错误是写成 container: section;（这是旧语法，已废弃），或漏掉 container-name 导致多个同类型容器冲突。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
container-type: inline-size;（推荐，仅监听宽度变化，性能好） - 若需同时响应宽高：
container-type: size;（开销略大，慎用） - 命名容器便于精准控制：
container: card / inline-size;（等价于container-name: card; container-type: inline-size;） - 避免在
display: inline元素上设container-type——它没有块级布局上下文，尺寸不可测
在 @container 中修改 CSS 自定义属性的实操限制
你不能在 @container 规则里直接写 --my-var: 12px;，CSS 自定义属性只能在选择器作用域内声明（比如 :root 或具体元素），@container 是条件规则，不提供作用域。
正确做法是：用 @container 匹配不同尺寸区间，然后给目标元素加 class 或直接设置内联样式变量：
@container (min-width: 400px) {
.card {
--card-padding: 16px;
}
}
@container (min-width: 600px) {
.card {
--card-padding: 24px;
}
}
注意：@container 必须写在全局作用域（不能嵌套在其他规则里），且其选择器必须能匹配到已启用 container-type 的祖先元素。
兼容性与 fallback 方案怎么写才不翻车
Chrome 105+、Firefox 119+、Safari 16.4+ 支持 @container，但 Safari 16.4 有个坑：不支持 container-name 带斜杠的写法（如 container: card / inline-size），得拆成两行。
- 检测支持性：
@supports (container-type: inline-size)包裹整个容器查询块 - 降级方案别只靠
@media：视口尺寸 ≠ 容器尺寸，更稳妥的是先设默认值（如--card-padding: 12px），再用@container覆盖 - 不要依赖 JS 注入
style标签去模拟 container query——DOM 尺寸变化频繁时，resize observer + setProperty 性能远不如原生@container，且无法响应 CSS 动画或 flex/gird 自动重排
真正容易被忽略的点是：容器查询生效的前提，是父容器有明确的尺寸约束（比如 width、flex-basis、grid-column），如果父容器 width 是 auto 且没被 flex/grid 限制，它可能始终报告 0px 宽度。
