container-type必须显式声明才能启用容器查询，否则@container规则静默失效；最常用值为inline-size（监听宽度），size支持宽高双向查询但兼容性较低，normal为默认禁用值。
@container 不是万能的媒体查询替代品，它只在明确启用了容器查询的父元素上生效——没加 container-type，写再多 @container 规则也没用。
必须先给父容器声明 container-type
浏览器不会自动把任意父元素识别为容器。只有显式设置了 container-type 的元素，才会成为查询目标。
-
container-type: inline-size：启用基于宽度的查询（最常用） -
container-type: size：同时启用宽高查询（需父元素有明确尺寸，且触发 layout，兼容性略低） -
container-type: normal：不启用查询（等价于未设置）
示例：
.card {
container-type: inline-size;
}
注意：display: contents 或 position: absolute 的父元素无法作为容器；Flex/Grid 容器可以，但子项需是常规流内元素。
@container 语法和断点写法与 @media 几乎一致
区别在于作用域：它查的是父容器的尺寸，不是视口。
- 断点单位只能是
px、em、rem，不支持vw/vh - 可嵌套在组件 CSS 中，不影响全局样式污染
- 支持
min-width、max-width、width，也支持aspect-ratio（Chrome 117+）
示例：
@container (min-width: 400px) {
.card-header {
font-size: 1.25rem;
}
}
@container (min-width: 600px) and (max-width: 800px) {
.card-actions {
display: flex;
}
}
常见失效原因：父容器没尺寸或被压缩
@container 查询依赖父容器实际渲染后的尺寸。如果父容器没有内容、高度塌陷、或被 overflow: hidden + height: 0 强制压制，查询就无从触发。
- Flex/Grid 子项默认不拉伸父容器，可能造成宽度为 0 —— 加
min-inline-size: 0或width: 100%保底 - 使用
resize: horizontal手动拖拽时，容器尺寸变化会实时触发查询，但初始渲染若尺寸为 0，规则不会生效 - Safari（≤16.4）不支持
@container，需检查@supports (container-type: inline-size)做降级
和 @media 混用时的优先级与定位逻辑
@container 规则优先级与普通 CSS 相同，按源码顺序覆盖；但它不参与媒体查询的“层叠层级”，而是独立计算条件是否满足。
- 同一选择器在
@media和@container中都出现时，谁后定义谁生效（无特殊权重） - 容器查询更“局部”：一个
.card在侧边栏窄区渲染时走小屏规则，在主内容区宽区渲染时走大屏规则，互不干扰 - 避免对同一属性在多层容器中反复查询（如卡片 → 列 → 网格），容易因尺寸继承关系导致意外交互
真正难的不是写对语法，而是判断哪个父级该设为容器、以及它是否稳定输出可预测的尺寸——这需要结合布局模型和 DOM 结构一起看，不能只盯 CSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
