container queries 解决组件响应自身容器尺寸的问题，而非视口；@media 失效于折叠屏、微前端等场景，因只监听 window.innerwidth；启用需显式设置 container-type: inline-size，且父容器须有可计算宽度；safari 存在命名容器解析 bug，推荐匿名写法；@container 与 @media 职责分离，前者管组件、后者管全局。
Container Queries 不是“更好用的媒体查询”，而是解决完全不同的问题——它让组件能响应自身容器尺寸，不是视口。在折叠屏、微前端、嵌套卡片等场景下，@media 失效是常态，@container 才是真解。
为什么 @media 在折叠屏里总“判断错”
折叠屏展开时，视口宽度可能从 300px 突然跳到 1200px，但页面中某个侧边栏卡片容器始终只有 320px 宽。@media (min-width: 768px) 会强制卡片按桌面态渲染，图标溢出、文字换行错乱。
-
@media只监听window.innerWidth，对局部容器缩放毫无感知 - 同一页面多个动态区域（如导航区收缩 + 内容区拉伸）无法用单个视口断点描述
- 微前端子应用注入到主框架某区块时，根本不知道主应用的视口断点逻辑
container-type: inline-size 是启动开关，漏了就等于没写
浏览器默认不把任何元素当容器，@container 规则静默失效且控制台不报错——这是最常卡住人的地方。
- 必须显式加
container-type: inline-size（推荐），size或block-size支持差、开销大，别碰 - 不要加在
display: contents或position: absolute的父元素上——它们不产生块格式化上下文，属性直接被忽略 - 父容器得有可计算宽度：比如设置了
width、max-width，或在 Flex/Grid 中受约束；纯width: auto的 div 不触发查询
@container card (min-width: 320px) 语法细节和 Safari 坑
命名容器看似清晰，但在 Safari 16.4 中有解析 bug，线上项目建议优先用匿名写法。
- 正确写法是
@container card (min-width: 320px)，不能写min-width以外的条件（如width或max-width） - 命名容器写法：
.card { container: card / inline-size; }；匿名写法：.card { container-type: inline-size; }+@container (min-width: 320px) - Safari 16.4 对
container-name的匹配不稳定，尤其在动态插入或 SSR hydration 后，建议降级为匿名 + 类名选择器兜底 - 不支持时，
@container规则被浏览器静默丢弃，不影响其他样式，所以不用@supports包裹整块
和 @media 混用时，职责必须划清
二者不是替代关系，混着用没问题，但一旦职责错位，就会出现“卡片在小容器里还显示图标”的诡异现象。
-
@media管全局：比如仪表盘整体列数切换、折叠屏整页导航栏收起 -
@container管组件：比如卡片内图文方向、列表项图标是否显示、表单控件堆叠/并排 - 避免嵌套写法：
@media (min-width: 768px) { @container (min-width: 400px) { ... } }—— 这会让组件失去独立性，Safari 下还可能因解析顺序失效 - 嵌套容器只响应**直接父级**：
.card的@container只看.card-container尺寸，不会穿透到更外层；需要跨级响应，就得逐层加container-type
真正难的不是写对语法，而是想清楚：这个样式变化，到底是该由“我所在的盒子”决定，还是由“整个屏幕”决定。很多项目卡在容器查询上，其实卡在设计思路上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
