容器查询通过@container监听组件直接父元素宽度，解决媒体查询无视组件实际空间的问题；需设置container-type: inline-size、父容器有可计算宽度，且与@media分层协作，不可混用。
容器查询让组件真正“知道”自己有多宽
媒体查询只看 window.innerWidth，不管组件被塞进 300px 宽的侧边栏还是 1200px 的主区，只要视口是桌面尺寸，它就按桌面样式渲染——结果就是文字溢出、图片错位、布局崩塌。而 @container 查的是组件**直接父元素**的内联方向尺寸（通常是宽度），这才是组件实际可用的空间。
常见错误现象：写了 @container (min-width: 400px) 却没生效，页面毫无反应，控制台也安静如鸡——大概率是漏了 container-type: inline-size，浏览器根本没把父元素当容器。
-
container-type: inline-size是最常用且性能友好的选项，只监听宽度变化；container-type: size会同时监听宽高，触发更频繁的重排，非必要别用 - 父容器必须有可计算宽度：比如设置了
width、max-width，或处于flex/grid子项中并受约束；纯width: auto+height: auto的 div 不会触发查询 - 别对
display: contents或position: absolute的父元素设container-type——它们不产生块格式化上下文，属性会被浏览器静默忽略
@container 和 @media 必须分层使用，不能混职责
二者不是替代关系，而是协作关系。混着写没问题，但一旦职责错位，就会导致样式逻辑混乱、断点重复、折叠屏下失效。
典型错误：在 @media (min-width: 768px) 里再嵌套 @container (min-width: 400px)——这会让组件失去独立性，而且 Safari 下可能因解析顺序出问题。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
@media管全局：比如仪表盘整体列数切换（grid-template-columns: repeat(4, 1fr) → repeat(2, 1fr)）、整页导航栏折叠 -
@container管组件：比如卡片内部图文是横排还是竖排、列表项图标是否显示、表单控件堆叠还是并排 - 嵌套容器只响应**直接父级**：
.card的@container只看.card-wrapper尺寸，不会穿透到外层的.dashboard-grid；若需跨级响应，得逐层加container-type
Safari 16.4 的命名容器 bug 很容易踩坑
Safari 16.4 对 container-name 解析存在不稳定行为，命名容器在部分场景下会失效——比如父容器已设 container: card / inline-size，但 @container card (min-width: 400px) 就是不触发。
这不是你代码写错了，是浏览器实现缺陷。线上项目建议优先用匿名写法：
.card-wrapper {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}
- 命名非必需，
container-name主要用于提高选择器精度，但牺牲了兼容性 - 不要为了“语义清晰”硬上命名，尤其在微前端或多团队协作项目中，统一用匿名更稳
- 服务端渲染（SSR）或静态生成时，
@container在首次渲染阶段不触发（无尺寸信息），依赖 JS hydration 后才生效；关键路径上别只靠它撑布局
不支持时规则被静默丢弃，但降级策略不能一刀切
Chrome 110+、Firefox 119+、Safari 16.4+ 已原生支持，但 CanIUse 数据不能全信——Safari 16.4 的 bug 和 SSR 场景下的延迟生效，才是真实瓶颈。
@container 规则在不支持的浏览器里会被静默丢弃，不影响其他样式，所以无需用 @supports 包裹整个区块。
- 真要降级，可用
ResizeObserver+ 切换 class，但仅限核心交互组件（比如图表缩放、表单动态布局） - 多数展示型组件（卡片、列表项、标题栏）直接 fallback 到固定布局更稳，别为兼容性堆 JS 逻辑
- 组件库封装时，把
container-type声明和@container样式打包进组件自身，使用者不用操心容器配置——这才是“开箱即用”的关键
