Container Queries 与 media queries 的本质区别在于查询目标不同：前者查父容器尺寸（需显式声明 container-type），后者查视口；卡片据此独立响应所在容器宽度，实现更精细的布局控制。
Container Queries 和 media queries 本质区别在哪
不是“换了个写法的响应式”，而是查询目标变了：@container 查的是父容器的尺寸（比如一个 .card-grid），@media 查的是视口。这意味着卡片能独立响应自己所在容器的宽度，而不是整个屏幕——比如侧边栏收起时，主内容区变窄，里面的卡片自动从三列变两列，而右侧广告位不受影响。
关键前提：父容器必须显式声明为 container context，否则子元素的 @container 规则完全不生效。
必须加 container-type 才能启用查询
浏览器默认不把任何元素当作 container，得手动开启。最常用的是 container-type: inline-size，表示只关心容器的行内方向（通常是宽度）变化。高度查询（size）目前支持度差，别用。
-
container-name可选，但建议加上——避免不同层级的 container 冲突，也方便调试 - 命名后，子元素里用
@container card-layout就能精准匹配，不加 name 则用@container匹配任意已声明的 inline-size 容器 - 别在
display: inline或无尺寸的元素上设 container，它需要有明确的 layout box
/* 正确：给网格容器声明 container */
.card-grid {
container-type: inline-size;
container-name: card-layout;
}卡片内部用 @container 写断点，不是 @media
子卡片里写 @media 没用——它还是查视口。必须用 @container，且规则写在卡片自身样式里（不是父容器里）。
立即学习“前端免费学习笔记（深入）”；
- 断点值是相对于父容器宽度的，单位只能是
px、em、rem，不支持%或vw - 常见误写：
@container (min-width: 400px)—— 这会匹配所有宽度 ≥400px 的 container，但你可能只想匹配叫card-layout的那个 - 推荐写法：
@container card-layout (min-width: 400px)，明确绑定 name
.card {
width: 100%;
}
@container card-layout (min-width: 400px) {
.card { width: calc(50% - 12px); }
}
@container card-layout (min-width: 600px) {
.card { width: calc(33.333% - 16px); }
}Chrome/Firefox 支持良好，Safari 16.4+ 才可用
目前 Safari 对 container-name 的支持有 bug：如果父容器动态增删 class 导致 container 被重建，部分版本下 @container 规则会失效。稳妥做法是：上线前务必在真机 Safari 测试 resize 或 DOM 更新场景。
没有 fallback 机制——不支持时，@container 块直接被忽略，卡片保持初始样式。所以建议保留一层 @media 作为降级（比如最小屏用单列，中屏双列，大屏三列），再用 @container 做精细调整。
真正难调的不是语法，是容器嵌套层级和 name 冲突。比如卡片里还有个图表组件也用了 container-type，它的 @container 规则可能意外捕获到外层 grid 的 size 变化——name 不唯一就容易串。
