容器查询基于父容器尺寸而非视口，需显式设置container-type: inline-size等属性才能生效，@container规则中min-width指容器主轴尺寸，不支持vw等视口单位，与媒体查询分工协作。
容器查询（Container Queries）不是媒体查询的替代品，而是解决“组件级响应式”的关键工具——它让样式根据父容器尺寸变化，而非整个视口。
为什么 container 属性必须显式设置才能生效
浏览器默认不会把任意元素当作容器查询上下文。你写了 @container 规则，但样式没反应？大概率是忘了给父容器加 container 或 container-type。
-
container是简写属性，等价于同时设置container-type: inline-size和container-name（可选） - 只设
container-type: size不行——size需要同时触发宽高测量，开销大，目前仅 Chromium 117+ 支持且需开启 flag，生产环境应避免 - 推荐写法：
container-type: inline-size;（基于宽度响应），兼容性好、性能稳定 - 若需命名以便精准匹配（比如多个容器嵌套时避免误触发），加
container-name: card;，然后在查询中写@container card (min-width: 300px)
@container 规则里不能用 max-width 等绝对单位做比较？
可以，但要注意：容器查询中的 min-width / max-width 指的是该容器的 inline-size（即主轴尺寸，通常是宽度），单位支持 px、em、rem、%，但 % 是相对于容器自身尺寸，不是父级或视口。
-
@container (min-width: 20rem)✅ 有效，按容器计算后的 rem 值判断 -
@container (min-width: 50%)✅ 合法，表示容器宽度 ≥ 自身宽度的 50%（恒为真，慎用） -
@container (min-height: 200px)❌ 无效——除非容器设了container-type: size，否则高度不可查 - 不要混用视口单位：
@container (min-width: 50vw)语法错误，vw在容器查询中不被解析
和媒体查询嵌套使用时，谁优先级更高？
两者不竞争优先级，而是分工不同：媒体查询控制布局层级（如网格列数），容器查询控制组件内部结构（如卡片内文字截断方式）。但执行顺序会影响最终效果——CSS 是自上而下解析的，后声明的规则会覆盖同权重的前声明规则。
- 常见陷阱：在外层用媒体查询设了
grid-template-columns: repeat(3, 1fr)，又在卡片内部用@container (max-width: 320px)把按钮从横向排布改成纵向。如果卡片容器本身被压缩到 320px 以下，但外层网格仍强行撑开，容器宽度可能根本达不到查询条件——这时要检查容器是否被 flex/grid 的min-width: auto卡住 - 调试建议：在开发者工具中选中目标容器 → Elements 面板右侧的 Layout 标签页 → 查看 “Container query container” 是否打钩；未勾选说明
container-type未正确生效 - 兼容性兜底：Safari 16.4+、Firefox 110+、Chrome 105+ 原生支持；旧版需用
container-query-polyfill，但它只支持inline-size类型，且对 transform/position:absolute 子元素有局限
真正容易被忽略的点是：容器查询依赖布局完成后的尺寸，所以它对 display: contents、visibility: hidden 或未渲染的 slot 内容不生效；另外，如果容器设置了 overflow: hidden 且子元素溢出导致实际渲染宽度变化，这个新宽度才是查询依据——而不是 CSS 宽度声明值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
