必须先用 container-type: inline-size 声明容器，再用 @container (min-width: 300px) and (max-width: 600px) 组合条件；未设 container-type 或 display 不支持时查询不生效。
@container 查询中 min-width 和 max-width 不是直接写在样式里，而是用 @container 语法声明查询条件
你不能像普通元素那样给容器设 min-width: 300px 然后指望它“自动响应”——@container 是一种**容器查询（Container Queries）**机制，必须先标记一个元素为“可查询容器”，再用 @container 规则匹配它的尺寸。浏览器只在该元素被显式设为容器后，才允许基于它的 inline-size（即宽度方向）做条件判断。
关键点：CSS 中没有 @container (min-width: ...) 和 @container (max-width: ...) 的独立语法；所有尺寸条件都写在同一个 @container 块的括号内，用 and 连接。
怎么正确声明一个支持查询的容器
必须给目标元素加 container-type: inline-size（或 container-type: size），否则后续任何 @container 规则都会被忽略。
-
container-type: inline-size是最常用的选择，表示只关心宽度（即inline-size），适用于大多数响应式布局场景 - 不能只写
container-name而不设container-type，那样容器不会被识别 - 命名是可选的：
container-name: sidebar可用于精确匹配，但没命名时默认匹配所有同类型容器 - 不要把
container-type写在媒体查询里，它必须是元素自身的样式声明
@container 中如何组合 min-width 和 max-width 条件
用 and 连接多个条件，例如：
立即学习“前端免费学习笔记（深入）”；
@container (min-width: 300px) and (max-width: 600px) {
.card-title {
font-size: 1.2rem;
}
}
这表示：仅当该容器的 inline-size 在 300px 到 600px 之间（含边界）时，规则生效。
注意几个实际约束：
-
min-width和max-width在这里指容器自身的inline-size，不是视口宽度，也不受父级width或flex-basis直接控制——它取决于容器在布局流中的实际渲染宽度 - 如果容器内容极少（比如空 div），且没设
min-width或padding，它的inline-size可能趋近于 0，导致查询永远不触发 - 不支持
min-width: 300px and max-width: 600px这种省略括号的写法；每个条件必须带括号 - 目前不支持
or、not等逻辑运算符，只能用and组合
容易踩的坑：为什么 @container 规则不生效
常见失效原因不是语法错，而是容器未真正“成立”：
- 忘了加
container-type: inline-size—— 这是最高频错误，查 DevTools 的 Layout 面板能看到“Container query not supported”提示 - 容器是
display: inline或display: contents，这类 display 值不支持容器查询 - 容器本身被设了
width: 0或overflow: hidden且无内容撑开，导致inline-size计算为 0 - 在 Flex/Grid 容器里，子项默认有
min-width: auto，可能阻止收缩，进而让容器宽度无法进入你设定的查询区间 - 使用了
box-sizing: border-box却没把padding和border算进查询范围 ——@container的inline-size是包含 padding 和 border 的总宽，和盒模型一致
真实项目里，最常被忽略的是：你写的 @container 规则，其实一直没被解析，因为那个 div 根本没被当成容器——检查 container-type 是否真的生效，比调参数更重要。
