container-type: inline-size 是唯一实用的取值，父容器须显式声明才能触发容器查询；size 难稳定触发，normal 不支持查询；勿设于 body 或 :root；应使用常规块级容器，并在 @container 内通过 CSS 规则调整子元素样式。
container-type: inline-size 是唯一实用的取值
父容器必须显式声明 容器查询本身不改变子元素尺寸，它只是提供一个“条件作用域”。真正调整比例要靠内部的 CSS 规则，比如： 注意：这些规则只在该容器查询生效范围内起作用，不会泄漏到其他同名类上。但如果你依赖 截至 2026 年 4 月， 关键点在于：容器查询不是媒体查询的替代品，而是补充。它解决的是“组件级响应”，而不是“视口级响应”。一个卡片组件在小容器里用 16:9，在大容器里切 4:3，这个逻辑只有容器查询能干净表达；但整个页面断点仍得靠 container-type: inline-size，才能触发容器查询（@container）。container-type: size 要求宽高同时变化才响应，实际中几乎无法稳定触发；而 container-type: normal 不支持查询。别在 body 或 :root 上设——它们默认不是格式化上下文，绝大多数浏览器下无效。用 等常规块级容器更可靠。子元素比例不能直接写在 @container 里
@container (min-width: 400px) { .item { flex: 2; } } —— 在父宽 ≥ 400px 时让某子项占双倍空间@container (max-width: 600px) { .card { aspect-ratio: 4 / 3; } } —— 小屏下切为竖构图flex 或 grid 布局，得确保父容器本身没被压缩（例如 display: flex 下子项设了 flex-shrink: 0 却没配 min-width），否则查询的“宽度”可能远小于视觉所见。:has() 和 container queries 别混着用
:has() 是选择器，用于根据后代/兄弟状态反向选祖先；@container 是媒体查询变体，基于容器尺寸做条件样式。二者语法层级不同，目前**无法嵌套使用**——你不能写 .container:has(@container (min-width: 500px))，浏览器会直接忽略整条规则。常见误操作是试图用 :has() 检测某个子项是否存在，再联动容器查询改比例，这行不通。真要联动，得靠 JS 监听容器尺寸变化后手动加 class，再用普通类名驱动样式。兼容性与 fallback 必须提前考虑
@container 在 Chrome 110+、Firefox 115+、Safari 16.4+ 支持良好，但旧版 Safari（:has() 能兜底——它的兼容性（Chrome 105+、Firefox 103+、Safari 15.4+）和容器查询并不重合。最稳妥的 fallback 是用传统媒体查询 + aspect-ratio 或 padding-bottom hack，例如：.card {
aspect-ratio: 16 / 9;
}
@container (min-width: 500px) {
.card { aspect-ratio: 4 / 3; }
}
@media (max-width: 499px) {
.card { aspect-ratio: 16 / 9; }
}
@media。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
