容器查询需父容器设container-type（如inline-size）才生效，支持基于容器尺寸的响应式布局，Chrome/Edge/Safari已支持，Firefox尚未支持，需手动提供兼容性fallback。
用 container 查询实现真正的容器响应式
CSS 原生支持基于容器尺寸的响应，不是靠 JS 算宽高、也不是靠媒体查询监听视口，而是用 @container 查询。前提是父容器必须声明 container-type，否则所有 @container 规则都会被忽略——这是最常卡住的地方。
典型场景：卡片网格里每个 .card 需要根据自身容器（比如一个 flex 子项）的宽度自动切换布局，而不是等整个屏幕缩放才变。
- 父容器必须设
container-type: inline-size（或size），仅此一项就决定查询是否生效 -
@container写在 CSS 里，和@media并列，但作用域只对后代元素生效 - 不支持嵌套容器查询（即子容器上再设
container-type，不会触发更深层的@container） - 目前 Chrome 105+、Edge 105+、Safari 16.4+ 支持，Firefox 尚未支持（截至 2024 年中）
/* 父容器 */
.card-list {
display: flex;
flex-wrap: wrap;
container-type: inline-size; /* 关键！没这行，下面全无效 */
}
<p>/<em> 子元素内使用容器查询 </em>/
.card {
width: 100%;
}
@container (min-width: 400px) {
.card {
width: calc(50% - 1rem);
}
}
@container (min-width: 600px) {
.card {
width: calc(33.333% - 1rem);
}
}
container-name 用来隔离不同容器的查询逻辑
当页面里有多个可缩放容器（比如侧边栏 + 主内容区），它们可能都用了 container-type: inline-size，但你只想让某组样式只响应其中某个容器的变化——这时候就得靠 container-name 配合 @container 的命名语法。
常见错误是给多个容器起相同名字，结果样式错乱；或者忘记在 @container 里写名字，导致规则被所有同类型容器触发。
立即学习“前端免费学习笔记（深入）”；
- 容器设
container-name: sidebar，对应查询必须写@container sidebar (min-width: 280px) - 名字区分大小写，且不能含空格或特殊字符（只支持字母、数字、连字符）
- 未命名的容器默认属于匿名容器组，只能用无名
@container匹配 - 一个元素可以同时属于多个命名容器（通过空格分隔多个
container-name）
为什么 width 百分比 + max-width 不算“容器响应”
很多人以为用 width: 100% 或 max-width: 300px 就是响应容器了，其实不是——这些值只是被动适应父级盒模型计算结果，并不会触发重排或条件样式切换。真正“响应”，意味着能像媒体查询一样做断点判断、切换布局结构或隐藏/显示元素。
典型误用场景：在 Flex 容器里给子项设 flex: 1，再加 min-width: 300px，看起来会换行，但这只是 Flex 布局的自然折行行为，无法控制“当容器缩到 300px 以下时字体变小”这类逻辑。
-
flex/grid的自动折行、拉伸是布局算法行为，不是响应式查询 - 没有断点机制，没法配合
font-size、padding、伪元素显隐等做协同变化 - 一旦容器本身是
display: contents或display: none，这些尺寸约束就完全失效
兼容性 fallback 必须手动写，浏览器不会自动降级
@container 是渐进增强特性，不支持的浏览器（比如 Firefox 或旧版 Chrome）会直接跳过整段规则，不会尝试用视口媒体查询模拟。这意味着你得自己提供替代方案，不能依赖“它会退化成 @media”这种想法。
最容易被忽略的是：只写了 @container，却没配 @media 或 class 切换逻辑，结果在 Firefox 里布局完全错乱。
- 推荐模式：先写基础流式样式 → 再用
@media覆盖常见视口断点 → 最后用@container覆盖容器级精细控制 - 避免把关键布局逻辑只放在
@container里（比如只在这里设display: grid） - 可以用
@supports (container-type: inline-size)做特性检测，但注意它不等于运行时容器可用性
容器查询的复杂点不在语法，而在于你要主动管理容器的“可查询性”——从 container-type 设置，到命名隔离，再到降级路径，每一步都得显式决定，漏掉任意一环，效果就断了。
