Container Queries 比 Media Queries 更适合组件级响应式，因其响应父容器尺寸而非视口，实现“样式随容器走”；需显式声明 container-type 且容器须有布局上下文，@container 规则不可嵌套或逻辑组合，调试需检查 computed styles 中 container 属性及 DevTools 的 Container query containers 区域。
Container Queries 为什么比 Media Queries 更适合组件级响应式
Media Queries 响应的是视口宽度，而 Container Queries 响应的是父容器自身的尺寸——这意味着同一个组件在不同布局位置（比如侧边栏 vs 主内容区）能自动适配，无需全局断点或 JS 监听。它真正实现了“样式随容器走”，是组件化 CSS 的关键补全。
但要注意：container-type 必须显式声明，且只对设置了 display: block（或 inline-block、flex、grid 等）的祖先元素生效；display: contents 或未设宽高的 div 默认不构成查询容器。
如何正确启用 Container Queries
必须两步缺一不可：
- 给目标容器添加
container-type: inline-size（横向尺寸查询）或container-type: size（宽高都查，需同时设container-name） - 在后代选择器中使用
@container规则，不能写在顶层，也不能用在伪元素或@keyframes内
示例：
立即学习“前端免费学习笔记（深入）”；
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card h2 {
font-size: 1.5rem;
}
.card .meta {
display: flex;
}
}
注意：@container 不支持嵌套写法（如 @container (min-width: 400px) { @container (max-height: 200px) { ... } }），也不支持逻辑组合写法（如 (min-width: 400px) and (orientation: landscape)）。
常见失效原因和调试方法
最常遇到的不是语法错，而是容器“没被识别”：
- 父元素没有明确
width或max-width，且处于弹性布局中未分配空间（比如flex: 1但兄弟项占满）→ 检查 computed styles 中该元素的container属性是否为inline-size - 用了
container-name: card却在@container card (min-width: 400px)中拼错名字 → 浏览器会静默忽略整条规则，无报错提示 - 在 Shadow DOM 内部使用时，
container-type需加在 shadow host 上，且仅对 shadow tree 内部生效
Chrome DevTools 的 Elements 面板里，选中元素后，在 Styles 标签页底部能看到 “Container query containers” 区域，点开可确认当前节点是否被识别为容器及类型。
兼容性与降级方案怎么写
目前 Chrome 110+、Edge 110+、Safari 16.4+ 支持，Firefox 尚未实现。不要依赖 @supports (container-type: inline-size) 做功能检测——它在 Safari 中返回 true，但实际不支持 @container 规则。
稳妥的降级方式是：先写默认样式（小屏态），再用 @container 覆盖大容器下的增强样式，让不支持的浏览器自然回退到基础版。避免反向写法（即先写大屏样式 + @container (max-width: 400px) 覆盖小屏），因为不支持时会全部生效，导致错乱。
复杂组件建议保留一个 class 控制开关（如 .card--responsive），方便未来通过 JS 注入容器能力或做 A/B 测试。
真正难的不是语法，是判断哪个父级该设 container-type——它必须是样式变化的“决策边界”，而不是随便挑个 wrapper。设浅了，子组件无法独立响应；设深了，容器太小，查询失去意义。
