如何在旧浏览器中优雅降级容器查询?

容器查询听着挺香，但一碰到旧浏览器，很多人就开始犯嘀咕：是不是得写两套布局？其实没那么吓人。从旁观者角度看，优雅降级的关键不在“补全所有能力”，而在“别让增强能力反过来搞崩基础体验”。

旧浏览器会直接忽略 @container 整块规则，这本身就是好事——页面不会炸，只是少了组件跟着容器变宽变窄的本事。真正要避坑的，是别一上来就指望所有环境都长得一样漂亮。

最稳、也最省心的路子，是用 @supports 做渐进增强。先给所有浏览器写一套能跑的基础态，比如卡片永远单列堆叠、间距正常、不挤不崩。然后再用 @supports (container-type: inline-size) 把容器声明和断点样式包进去。不支持的浏览器永远停在基础态，功能完整、视觉可用，零依赖，也不用装任何东西。这几乎是性价比最高的选择。

只有项目硬性要求旧浏览器也要看到完整自适应时，才考虑官方 Polyfill。它靠 ResizeObserver 模拟容器查询，每个容器都会挂一个观察器，有性能开销，嵌套时的 container-name 也支持不好。生产环境最好只在必须照顾更旧环境时按需引入，别全站无脑塞。

还有个折中玩法：先用媒体查询给个“凑合能用”的大致横向布局，再用容器查询在支持的环境里精准覆盖。这样既不写 Polyfill，又不让旧浏览器完全退化成单列。

说白了，优雅降级就一句话：先保证能用，再谈好用。基础态兜底，增强态锦上添花，旧浏览器用户至少不会看到一地鸡毛。