容器查询非移动端专用，但更适配移动端动态结构；必须声明container-type: inline-size才能启用，且需父容器有可计算宽度，命名容器在safari中易失效，应优先用匿名写法，@container与@media职责须分明。
容器查询不是“移动端专用”，但它在移动端组件化 UI 中的适配效果远超媒体查询——根本原因在于：移动端页面结构更动态、容器尺寸更不可控，而容器查询让组件只关心自己“脚下那块地”的大小。
container-type: inline-size 必须显式声明，否则@container静默失效
浏览器默认不把任何元素当容器，container-type: inline-size 是唯一可靠的启动开关。漏掉这行，@container 规则会被完全忽略，控制台也不报错，这是最常卡住人的地方。
- 别用
size或block-size：前者开销大、兼容性差（Safari 16.4+ 才稳定），后者在移动端几乎无实用场景 - 不能加在
display: contents或position: absolute的父元素上——它们不生成块格式化上下文，属性直接被丢弃 - 父容器得有可计算宽度：比如设置了
width、max-width，或在 Flex/Grid 中受约束；纯width: auto的 div 不触发查询
@container (min-width: 320px) 语法必须严格，Safari 对命名容器有解析 bug
移动端用户大量使用 Safari，而 Safari 16.4 对 container-name 的匹配不稳定，尤其在 Vue/React 动态挂载、SSR hydration 后容易失效。
- 推荐匿名写法：
.card-container { container-type: inline-size; }+@container (min-width: 320px) - 命名写法要带空格：
@container card (min-width: 320px)，不能写成@container(card)或@container card(min-width: 320px) - 条件里只支持
width、min-width、max-width、inline-size，不支持height或aspect-ratio
和@media 混用时，职责错位会导致布局错乱
在折叠屏或微前端场景下，@media 只监听 window.innerWidth，对局部容器缩放毫无感知。如果同时用两者控制同一组件，很容易出现“小容器里还显示图标”这类诡异现象。
-
@media管全局布局（如导航栏折叠/展开）、@container管组件内部（如卡片是否横向排布），边界必须划清 - 不要用
@media包裹@container做“双重保险”，这会破坏容器查询的独立性 - 降级方案要兜底：比如
@container (min-width: 400px) { ... }+@media (min-width: 768px) { ... }，但两套规则不能冲突
真正难的不是写对语法，而是重构思维——从“这个屏幕多宽”转向“这个组件能用多宽”。一旦父容器尺寸由 JS 动态控制（比如侧边栏拖拽），或嵌套在 Web Component / Shadow DOM 里，container-type 是否及时生效、查询是否及时重算，就变成需要实测验证的关键点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
