容器查询（@container）才是组件开发的正确选择，它使组件能感知自身父容器尺寸变化，解决@media在封装场景下因依赖视口宽度导致的响应失效问题。
容器查询（@container）才是组件开发的正确选择
媒体查询（@media）在组件封装场景下基本失效——它只看视口宽度，不认父容器大小。一个写死 @media (max-width: 768px) 的卡片，在侧边栏里宽仅 300px 时照样按“桌面态”渲染，文字溢出、图片错位、布局崩塌。而 @container 能让组件真正“感知自身所处环境”，这才是现代组件库和微前端架构需要的响应式能力。
为什么 @container 必须显式声明 container-type
浏览器默认不把任意元素当容器，必须主动开启。漏掉这步，@container 规则完全不生效，且控制台不会报错，容易卡半天才意识到是漏配置。
-
container-type: inline-size最常用，只监听容器内联方向（通常是宽度）变化，性能开销小 -
container-type: size同时监听宽高，但会触发更频繁的重排计算，慎用 -
container: <name> / inline-size</name>是简写语法，可同时设名称和类型，但命名非必需；没命名时直接用@container (min-width: 400px) - 不要对
display: contents或position: absolute的父元素设容器——它们不产生块格式化上下文，container-type会被忽略
@container 和 @media 不是二选一，而是分层协作
混着用没问题，但职责必须清晰：全局布局交由 @media，组件内部交由 @container。强行用媒体查询模拟容器行为，最终只会堆出一堆难维护的断点和重复样式。
- 例如仪表盘页面：用
@media控制整体网格列数（grid-template-columns: repeat(4, 1fr)→repeat(2, 1fr)），而每个卡片组件内部用@container控制图文排布方向 - 嵌套容器要小心：子容器的
@container查询只响应其**直接父容器**尺寸，不穿透多层；若需跨级响应，得逐层声明container-type - 服务端渲染（SSR）或静态生成时，
@container在首次渲染阶段不触发（无尺寸信息），依赖 JS 注入或 hydration 后才生效；关键路径上别只靠它撑布局
兼容性现状与降级方案不能只看 CanIUse 数据
Chrome 110+、Firefox 119+、Safari 16.4+ 已原生支持，但 Safari 16.4 的 @container 对 container-name 解析有 bug，命名容器在部分场景下失效——这时候宁可不用命名，改用匿名容器 + container-type 组合。
立即学习“前端免费学习笔记（深入）”；
- 不支持时，
@container规则被浏览器静默丢弃，不会影响其他样式，所以无需@supports包裹整个区块 - 真要降级，可用 JS 监听
ResizeObserver+ 切换 class，但仅限核心交互组件；多数展示型组件直接 fallback 到固定布局更稳 - PostCSS 插件如
postcss-container-queries目前无法可靠转译，别指望它解决兼容问题
最常被忽略的一点：容器查询生效的前提是容器本身有明确尺寸。如果父容器是 width: auto 且未受约束（比如在 flex 容器中未设 flex-basis），它的内联尺寸可能为 0，@container 就永远等不到触发时机。
