必须先设置 container-type 才能使 @container 生效，常用 inline-size 响应宽度变化，size 同时响应宽高但开销大，normal 等同于未启用；命名容器和复合条件可提升可靠性，但不可嵌套媒体查询；调试需确认父容器有尺寸且被 devtools 识别；容器查询与媒体查询并行互补，不替代也不覆盖。
直接用 @container 就行，但必须先让父元素成为“可查询容器”，否则规则完全不生效。
必须先设置 container-type
浏览器不会自动把任意父元素当作容器。你得显式声明它参与容器查询：
-
container-type: inline-size—— 最常用，只响应宽度变化（比如 flex 或 grid 容器的内联方向） -
container-type: size—— 同时响应宽高，但会触发重排开销，慎用 -
container-type: normal—— 等同于没写，不启用查询
别漏掉这个；写了 @container 却没设 container-type，样式根本不会切换，控制台也不会报错，纯静默失效。
@container 语法和常见写法差异
基础写法是 @container (min-width: 400px) { ... }，但它依赖最近的、带 container-type 的祖先。如果 DOM 中有多个候选容器，浏览器取“最近的那个”。
- 加命名更可靠：
.card-container { container: card / inline-size; }+@container card (min-width: 400px)，避免歧义 - 支持复合条件：
@container (min-width: 400px) and (max-width: 768px) - 不支持嵌套媒体查询语法（比如
and (hover: hover)），仅限尺寸和自定义属性比较
注意：@container 里不能写 @media，反过来也不行——两者层级不同，不能混用。
为什么 @container 没反应？检查这三点
最常卡在这几个地方：
- 父元素没设
container-type，或设成了normal - 父元素没有明确尺寸（比如
width: auto且无内容撑开），导致计算出的“容器宽度”为0px - 用了
display: contents或display: none的父元素——它们不构成容器边界
调试建议：给容器加个临时 outline: 1px solid red，确认它确实渲染且有宽度；再用 DevTools 的“Layout”面板看“Container queries”是否被识别。
和媒体查询共存时的优先级与渐进增强
@container 不替代 @media，而是补充。典型做法是：
- 先写基础样式（所有浏览器都跑）
- 用
@supports (container-type: inline-size)包一层容器查询增强逻辑 - 保留原有
@media处理全局视口级响应（比如导航栏折叠）
不要指望用容器查询覆盖 @media 的断点逻辑——它们作用域完全不同。一个组件在窄侧边栏里用容器查询变紧凑，在宽屏幕下用媒体查询隐藏某些控件，二者并行不悖。
真正难的是容器尺寸的“稳定性”：flex 项收缩、grid 自适应列、内容动态加载，都可能导致容器宽度抖动。这时候得配合 min-inline-size、固定 flex-basis 或 CSS 自定义属性做锚定，否则 @container 会在临界点反复触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
