容器查询需父元素声明 container-type: inline-size 才生效，否则被静默忽略；它响应直接父容器宽度变化，适用于组件级响应式，而媒体查询负责全局视口适配。
容器查询不是媒体查询的升级版，而是解决完全不同问题的工具：@media 看视口，@container 看父元素——用错地方，样式就“不听使唤”。
为什么写了 @container 却没反应？
最常见原因是漏了 container-type: inline-size。浏览器默认不把任何元素当容器，@container 规则遇到没声明类型的父亲，会直接跳过，控制台零报错、零提示。
-
container-type: inline-size是首选，只监听宽度变化，开销小、兼容稳（Chrome 110+、Firefox 119+、Safari 16.4+ 基本可用） - 别对
display: contents或position: absolute的父元素设container-type——它们不产生块格式化上下文，属性被静默忽略 - 简写
container: / inline-size一行搞定，命名非必需；没命名时直接写@container (min-width: 400px)就行
@media 和 @container 各自该管什么？
混着写语法没问题，但职责错位就会埋坑。比如在 @media (min-width: 768px) 里再套 @container，组件就失去独立性，Safari 下还可能因解析顺序失效。
-
@media管全局：导航栏折叠、页脚堆叠、主区栅格列数切换（grid-template-columns: repeat(4, 1fr)→repeat(2, 1fr)） -
@container管组件：卡片内图文横排/竖排、列表项图标显隐、表单控件堆叠还是并排 - 同一个卡片组件放进 280px 侧边栏和 1200px 主区，
@media只看视口，@container才能读到它真正“能用多宽”
父容器尺寸不稳定，@container 就失效
容器查询只响应**直接父元素**的尺寸，而且这个尺寸必须可计算、能触发重排。Flex/Grid 容器本身通常不合适，因为子项尺寸是算法动态分配的。
- 父容器要有明确宽度约束：比如设置了
width、max-width，或处于 Flex/Grid 子项中且受flex-basis、grid-column等限制 - 避免设在
width: auto; height: auto的裸 div 上——它没有稳定内联尺寸，查不到值 - 如果用了
flex布局，min-width: 0可能压缩子项导致容器宽度塌缩，@container条件迟迟不匹配
真正卡住人的从来不是语法，而是让父容器“尺寸可测”：它得有 box-sizing、padding、border 的明确参与，还得避开那些不产生 BFC 的布局陷阱。调试时打开 DevTools 的「Containers」面板，一眼就能看到哪些元素被识别为容器、当前尺寸是多少——别靠猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
