容器查询不生效的根本原因是父容器未显式声明container-type: inline-size，该属性必须通过CSS在父选择器中设置，否则@container规则被浏览器静默忽略。
容器查询（@container）不是“媒体查询的替代品”，而是解决「组件在不同父容器尺寸下自适应」这一具体问题的正解——它需要你主动为容器设置 container-type，否则所有 @container 规则都会被忽略。
为什么写了@container却完全不生效
这是最常卡住人的第一步。CSS 容器查询不会自动监听任意父元素尺寸变化，必须显式声明容器边界：
-
container-type是必需的，值只能是inline-size（推荐，默认行为）或size（需同时设container-name才能用于命名查询） - 不能写在
<body>或未设尺寸限制的<div>上——父容器得有明确的块级格式化上下文（BFC）和可测量的宽度（比如设置了width、max-width、flex-basis，或在 flex/grid 项中） - 不要用
display: inline的元素做容器；display: contents也不行，它不产生盒子
✅ 正确示例：
.card {
container-type: inline-size;
width: 100%;
max-width: 400px;
}
如何用@container写响应式卡片布局
典型场景：一个卡片组件，在窄容器里显示单列标题+文字，在宽容器里变成左图右文。关键在于把断点逻辑从视口移到卡片自身容器上：
- 断点单位用
px、em、rem都可以，但推荐px—— 它基于容器的内联尺寸（即宽度），不是视口 - 不支持
min-width/max-width简写，必须用完整语法：@container (min-width: 400px) - 可叠加条件：
@container (min-width: 400px) and (max-width: 600px)，但注意浏览器兼容性（Chrome 110+、Safari 16.4+、Firefox 119+ 支持，无前缀）
✅ 实操片段：
@container (min-width: 480px) {
.card-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
.card-image {
grid-row: span 2;
}
}
container-name什么时候必须用
只在你需要对多个不同语义的容器做差异化查询时才需要命名，比如侧边栏里的卡片和主内容区里的卡片要走不同样式规则：
立即学习“前端免费学习笔记（深入）”；
- 命名后，
@container必须带上名字：@container sidebar (min-width: 300px) - 命名容器必须同时设
container-type: size（不只是inline-size），因为命名查询会触发尺寸容器（含宽高）的布局重计算 - 性能敏感场景慎用
size—— 它会让容器在高度变化时也触发查询重评估，可能引发 layout thrashing
⚠️ 常见错误：container-name: card 却没配 container-type: size，此时该查询永远不匹配。
与@media混用时的优先级和调试技巧
容器查询和媒体查询是两套独立系统，规则不合并、不继承、不嵌套。调试时容易误判来源：
- DevTools 中 Chrome/Safari 已支持在 Styles 面板标记哪些样式来自
@container（带「container query」标签），但 Firefox 目前只显示规则文本，不标注来源 - 冲突时以 CSS 特异性（specificity）为准，和是否是容器查询无关；同特异性下，后声明的规则胜出
- 不要试图在
@container内再写@media—— 虽然语法允许，但语义混乱，且无法解决“容器尺寸依赖视口”的根本矛盾
真正麻烦的是嵌套容器：子容器的查询基于其直接父容器，而不是祖父容器。如果中间某层没设 container-type，链就断了——这点比媒体查询难调试得多。
