不能靠 CSS-only polyfill 补容器查询，因为旧浏览器解析器遇到 @container 会直接跳过整条规则、不建语法树，静态转换无法响应运行时尺寸变化，且 @media 语义与 @container 不同；唯一可靠方案是 ResizeObserver + class 切换模拟。
原生 @container 在 Safari 15.3、Chrome 104 及更早版本完全不解析，Polyfill 不是“打补丁”，而是用 JS 模拟整个查询逻辑——没有真正可靠的 CSS polyfill 能让旧浏览器识别 @container 语法。
为什么不能靠 CSS-only polyfill 补容器查询
CSS 解析器遇到不认识的 at-rule（比如 @container）会直接跳过整条规则，连语法树都不建。这意味着：
- 任何仅修改 CSS 文件的“polyfill 工具”（如 postcss 插件）都只能做静态转换，无法响应运行时尺寸变化
-
@supports (container-type: inline-size)在不支持的浏览器里返回false，但你没法用它“注入”新规则——CSS 不支持动态生成@container - 试图把
@container转成@media是错的：前者查容器 content-box 宽度，后者查 viewport，语义和数值根本对不上
可行的降级路径：用 ResizeObserver + class 切换模拟
这是目前唯一稳定、可控、无框架依赖的兼容方案，核心是把容器宽度映射为预设类名，再用 CSS 类覆盖原 @container 样式。
- 监听目标容器的
contentRect.width，不是offsetWidth或getBoundingClientRect()—— 后两者含 border/padding，会偏离@container的 content-box 语义 - 断点值必须和项目中
@container (min-width: 400px)的数值严格一致，否则样式错位 - 每个容器需独立调用
observer.observe(el)；复用同一实例但混用不同断点逻辑会导致类名混乱 - 若容器可能被销毁（如 React unmount、Vue v-if），必须配对调用
observer.unobserve(el)，否则内存泄漏
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
const width = entry.contentRect.width;
const el = entry.target;
el.classList.remove("cq-sm", "cq-md", "cq-lg");
if (width < 400) el.classList.add("cq-sm");
else if (width < 768) el.classList.add("cq-md");
else el.classList.add("cq-lg");
}
});
observer.observe(document.querySelector(".card"));如何与原生 @container 共存而不重复工作
不要写两套完全独立的样式。推荐用 “渐进增强” 写法：先写原生 @container，再用 JS 注入降级类，并确保降级 CSS 的选择器权重 ≥ 原生规则。
立即学习“前端免费学习笔记（深入）”；
- 原生写法：
@container (min-width: 400px) { .card-title { font-size: 1.25rem; } } - 降级 CSS 写法：
.cq-md .card-title { font-size: 1.25rem !important; }（!important是为了压过未生效的原生规则） - 在 JS 初始化时检测：
if (!CSS.supports('container-type', 'inline-size')) { /* 启动 ResizeObserver */ } - 避免在同一个元素上同时写
@container和媒体查询断点逻辑——它们触发条件不同，混用容易导致样式打架或闪动
折叠屏、Flex/Grid 容器里的特殊坑
旧版浏览器对容器尺寸更新更不敏感，尤其在折叠屏双态切换或 Flex 子项收缩时，容易卡在错误断点。
- Flex 项默认有
min-width: auto，可能导致容器 content-box 宽度为 0 —— 必须加min-width: 0或width: fit-content才能真实反映内容宽度 - 某些 Android WebView 对
ResizeObserver的回调延迟严重，建议加简单节流：setTimeout(() => { /* 更新类名 */ }, 0)避免同步重排 - 不要依赖
container-name做降级匹配——JS 没法读取该属性，所有降级逻辑只认 DOM 结构和类名 - 真机测试不可省：DevTools 的 device toolbar 只改 viewport，不触发容器重排，旧浏览器下常显示正常但实机失效
最易被忽略的是：容器查询的“生效前提”在 JS 侧也得复现一遍——比如父容器必须形成 BFC（overflow: hidden 或 display: flow-root），否则 ResizeObserver 读出的 contentRect.width 可能是 0，降级就全崩了。
