通过引入 polyfill 脚本并在 css 中编写基于容器查询的样式，可以在不支持该特性的旧版浏览器中实现优雅降级。具体做法是加载 @import 或 <script></script> 引入的 polyfill，它会自动将 @container 规则转换为 javascript 监听器，从而在运行时应用样式；对于完全不支持 js 的环境，则依赖未加查询包裹的基础布局作为默认回退。
如何检测并加载容器查询 Polyfill
使用 matchContainerQuery API 可以精确判断当前环境是否原生支持容器查询。如果检测失败，则动态插入 polyfill 脚本以确保功能可用。这种按需加载策略避免了在不需要的环境中浪费资源。
// 检查是否支持容器查询
if (!window.matchContainerQuery) {
// 动态加载 polyfill
const script = document.createElement('script');
script.src = 'https://unpkg.com/css-container-queries-polyfill/dist/index.js';
document.head.appendChild(script);
}
如何处理不支持 JS 的极端降级情况
当 JavaScript 被禁用时，polyfill 无法工作，此时必须依靠纯 CSS 的层叠特性。我们将基础样式写在 @container 之外，确保在没有查询条件匹配或脚本失效时，元素仍能呈现可用的布局状态。
立即学习“前端免费学习笔记（深入）”；
.card {
/* 基础样式：所有浏览器都可见 */
display: flex;
flex-direction: column;
}
@container (min-width: 400px) {
.card {
/* 仅在有容器查询支持且宽度达标时生效 */
flex-direction: row;
}
}
Polyfill 性能对重排的影响
Polyfill 通常通过 ResizeObserver 监听容器尺寸变化来触发样式更新。虽然现代浏览器优化了此过程，但在高频 resize 场景下仍可能引起轻微的性能开销。建议在实际项目中结合 debounce 或使用原生的 view-transition 来进一步优化体验。
