旧浏览器完全忽略@container规则，兜底样式必须写在@container外部且用纯rem/px；@supports仅用于增强逻辑，极旧环境需用媒体查询模拟，容器须显式声明contain:size和container-type:inline-size。
旧浏览器压根不解析 @container 规则，不是“不生效”，而是整条规则被跳过——连控制台警告都没有。兜底必须写在普通 CSS 中，不能依赖 @supports 包裹，否则旧浏览器根本看不到。
兜底样式必须写在 @container 外部
很多人把降级样式塞进 @supports (container-type: inline-size) 块里，结果旧浏览器完全忽略整块，页面直接裸奔。正确顺序只能是：
.card-title { font-size: 1rem; }@supports (container-type: inline-size) { .card-title { font-size: clamp(1rem, 4vw, 1.5rem); }}
要点：
立即学习“前端免费学习笔记（深入）”；
- 兜底值必须是纯
rem或px，不能含calc()、var(--size)或em（IE 不支持这些） -
@supports只用于启用增强逻辑，不能当兼容开关 - 如果目标环境极旧（如 IE11、iOS 12），
@supports本身也不可靠，建议直接弃用，全靠外部样式
用媒体查询模拟容器查询行为
当组件尺寸与视口强相关时（比如卡片占满屏宽的 1/3），可用媒体查询分段逼近。关键是要算准临界点：
/* clamp(1rem, 4vw, 1.5rem) 对应： *//* 1rem = 16px → 4vw = 16px ⇒ 视口宽 = 400px *//* 1.5rem = 24px → 4vw = 24px ⇒ 视口宽 = 600px */
然后写：
.card-title { font-size: 1rem; }@media (min-width: 400px) { .card-title { font-size: calc(1rem + 0.25vw); } }@media (min-width: 600px) { .card-title { font-size: 1.5rem; } }
注意：
- 别用
vw直接写死，旧 WebView 对calc()+vw支持不稳定 - 优先用
px断点 + 固定字号，更稳妥 - 这种模拟只适用于“容器宽度 ≈ 视口宽度 × 固定比例”的简单场景
显式声明容器并确保尺寸可测
即使新浏览器中 @container 也常静默失效，根源往往在容器本身没准备好。旧浏览器兜底方案要能复用这部分逻辑：
- 容器元素必须设
container-type: inline-size，漏掉就全白写 - 避免设在
display: contents、position: absolute或float元素上——它们不产生块格式化上下文，属性被忽略 - Flex/Grid 子项需加
min-width: 0或width: fit-content，否则尺寸不可测，兜底样式也难对齐 - 给容器加
contain: size（至少），这是触发查询的硬性前提，也是判断“该不该走兜底”的信号
真正麻烦的不是写两套样式，而是让容器在旧环境中也能稳定输出可预期的尺寸——比如用 padding-top 百分比保宽高比，或用 max-width + margin: 0 auto 控制卡片最大宽度。这些基础约束，才是兜底能成立的前提。
