Container Queries 依赖父容器显式声明 container-type: inline-size，否则 @container 规则静默失效；需避免用 display: contents 等无布局盒元素，优先选直接父 wrapper，断点按实际容器宽度设定，禁与 @media 嵌套混用。
Container Queries 不是媒体查询的移动端“升级版”，它根本不管视口宽不宽——只看组件父容器有没有明确宽度、有没有被显式声明为可查询容器。漏掉 container-type: inline-size，样式就完全不生效，且控制台零报错。
为什么写了 @container 却没反应？
最常见原因就是父元素没加 container-type。浏览器默认不把任何元素当容器，@container 规则静默失效是常态。
-
container-type: inline-size必须显式写在父容器上，不能只靠container-name或 CSS 自定义属性“暗示” - 别加在
display: contents、position: absolute或纯内联元素（如span）上——它们不生成布局盒，尺寸不可测 - 如果父容器是
flex或grid的直接子项，且没设min-width、flex-basis或grid-column等约束，浏览器无法稳定计算其 inline-size - 给容器加
contain: layout style size比只用contain: content更稳妥，后者不隔离尺寸计算上下文
怎么给卡片类组件正确设容器和查询？
目标是让同一套卡片代码，在侧栏窄容器里竖排、在主内容区宽容器里横排——不依赖视口断点，也不靠 JS 监听。
- 容器选卡片的**直接父 wrapper 元素**（比如
.card-wrapper），不是卡片自身 - 推荐匿名写法：
.card-wrapper { container-type: inline-size; }，再配@container (min-width: 320px) { ... }—— Safari 16.4+ 对命名容器有解析 bug，线上项目优先避坑 - 断点值别抄媒体查询的
768px，按实际容器宽度定：窄侧栏常用300px–400px，主内容区可用500px–640px - 避免在
@container里用cqw/cqh单位做字体缩放——移动端缩放时易失真，优先用em或rem
和 @media 混用时最容易踩什么坑？
二者职责不同：@media 控制页面结构（比如导航栏是否折叠），@container 控制组件内部细节（比如卡片里图标显隐、图文方向）。混用可以，嵌套不行。
- 禁止写
@media (min-width: 768px) { @container (min-width: 400px) { ... } }—— 这会让组件行为被视口和容器双重绑定，失去独立性 - 折叠屏场景下，
@media只监听window.innerWidth，展开瞬间可能误判；而@container能真实响应侧边栏容器从 320px → 280px 的收缩 - 微前端子应用注入到主框架某区块时，
@container仍能查到该区块真实宽度，@media则完全无感 - Firefox 当前不支持
@container，降级方案应是 fallback 到@media+ 类名开关，而不是包裹在@supports里
真正难的不是写对语法，而是确保父容器在所有渲染路径下（SSR hydration、Vue/React 动态挂载、ResizeObserver 后续调整）都始终带着 container-type: inline-size，且尺寸可被浏览器在布局阶段可靠测量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
