container-type 必须显式声明，否则 @container 静默失效；需为父容器设置 container-type: inline-size，且该元素须有布局盒（非 inline/contents）、可测尺寸（避免 overflow:hidden 无宽高）；@container 仅作用于直接后代，不可样式化容器自身；断点应基于组件实际嵌套宽度而非视口。
container-type 必须显式声明，否则 @container 静默失效
写了 @container (min-width: 400px) 却没反应？大概率是漏了父容器的 container-type: inline-size。浏览器不会自动把任意元素当作查询上下文，必须显式启用——这步缺失时，整个 @container 规则会被直接忽略，控制台也不报错，极难排查。
常见错误包括：
- 只写
@container，没给父元素加container-type - 父元素是
display: inline或display: contents—— 这类元素不产生布局盒，无法测量尺寸 - 父容器设置了
overflow: hidden且未设宽高，导致尺寸计算为 0
inline-size 是最常用类型，只监听宽度变化，性能好、兼容稳；size 会同时监听宽高，但开销更大，且要求容器有明确尺寸（比如设置了 width）。
@container 作用域仅限直接后代，不能选容器自身
@container 规则里的选择器只能匹配该容器内部的后代元素，不能用来设置容器本身的样式。比如你不能在 @container (min-width: 400px) 里写 .card { background: blue; } —— 这条规则不会生效，因为 .card 就是容器本身。
正确做法是把容器和内容分离，或让容器自己成为查询主体：
- 推荐结构：
<div class="card-container"><div class="card">...</div></div>，然后给.card-container加container-type - 若想复用更紧凑，可让
.card自身当容器：.card { container-type: inline-size; }，再在@container中写.card h3、.card .meta等子元素选择器 - 命名容器（如
container-name: card）适合多处引用同一套规则；匿名查询（直接@container (min-width: 400px)）更轻量，但要求该父容器在 DOM 中唯一
断点值应基于组件实际使用场景，而非视口习惯值
别直接照搬 @media (max-width: 768px) 的断点。容器查询的数值要贴合组件在真实嵌套环境中的典型宽度：侧边栏卡片常在 280–320px，仪表盘小部件可能只有 200px，而主内容区卡片轻松超 600px。
几个实用参考：
- 窄列/侧边栏：用
@container (max-width: 320px)触发单列紧凑布局 - 中等面板：用
@container (min-width: 400px)显示元信息或图标 - 宽内容区：用
@container (min-width: 600px)切换为横向 flex 或 grid 布局 - 支持区间写法：
@container (300px ，避免重复覆盖
注意：单位统一用 px 或 rem，不要混用 em（它依赖字体大小，易引发意外缩放）。
与 @media 配合使用，各管一层
@media 和 @container 不是替代关系，而是分工明确：
-
@media处理页面级逻辑：导航栏折叠、全局字体缩放、深色模式切换 -
@container处理组件级逻辑：同一张卡片在窄栏里垂直堆叠，在宽区里横向展开，按钮组在小容器中换行，在大容器中并排
一个典型组合：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
}
}
.card {
container-type: inline-size;
}
@container (min-width: 400px) {
.card-actions {
display: flex;
}
}
真正容易被忽略的是：容器查询对 Flex/Grid 父容器敏感。如果组件被塞进 display: flex 的容器里，而该容器又没设 width 或 flex-basis，它的内联尺寸可能不可测——这时得检查父容器是否“有尺寸可查”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
