padding-top 百分比是唯一可靠 fallback，因它基于 css2.1 规范，ie6 起即稳定支持，按父宽计算，公式为(height÷width)×100%，需配合 position: relative、padding-top 和绝对定位内容层。
直接给元素加 aspect-ratio 在 Chrome ≤87、Safari ≤15.3、IE/Edge ≤18、微信 X5、UC 和旧安卓 WebView 中会被静默丢弃——不是报错，而是浏览器压根不解析那行 CSS，DevTools 里根本看不到它。必须手动 fallback，不能靠构建工具或 @supports 自动兜底。
为什么 padding-top 百分比是唯一可靠 fallback
它基于 CSS2.1 规范，从 IE6 起就稳定支持：padding-top 的百分比值始终按父容器宽度计算，不依赖任何新特性。公式固定为 (height ÷ width) × 100%，例如 16:9 → padding-top: 56.25%，4:3 → padding-top: 75%。手算错会导致比例严重失真。
这个方案只靠三件事生效：
- 父容器设 position: relative
- 容器自身设 padding-top
- 内容层（如 <img> 或 <video></video>）用 position: absolute; inset: 0 或等效写法（top: 0; left: 0; width: 100%; height: 100%）
@supports 写法必须外置且顺序严格
@supports (aspect-ratio: 1/1) 在 Chrome ≤27 中根本不被识别，整块规则会被跳过；Safari 15.3–15.4 更糟：能识别 @supports，却渲染不出 aspect-ratio。降级逻辑必须写在 @supports 外部。
正确顺序如下：
.ratio-box {
position: relative;
width: 100%;
padding-top: 56.25%;
}
@supports (aspect-ratio: 16/9) {
.ratio-box {
padding-top: 0;
aspect-ratio: 16/9;
}
}
常见错误包括：
- 把 fallback 样式包进 @supports 块里
- 先写 aspect-ratio，再覆盖 padding-top: 0
- 同时写 height: 0 和 padding-top，旧浏览器取 height: 0 直接压扁内容
Flex/Grid 容器中 aspect-ratio 失效不是兼容性问题
aspect-ratio 只在元素有明确可推导宽度时才参与计算。而 flex 或 grid 的收缩/拉伸逻辑会先锁定尺寸，把比例约束挤掉。
典型表现和修复方式：
- Flex 子项若带 flex: 1 或显式 min-width: 0，会强制压缩；临时加 flex-shrink: 0 可验证是否为此问题
- Grid 列宽写死（如 grid-template-columns: 200px 200px），子项再设 aspect-ratio 也无效；应改用 1fr 或 minmax(0, 1fr)
- 替换元素（<img>、<video></video>）本身不支持 aspect-ratio，必须套一层 <div> 容器并设该属性<p>最容易被忽略的是：padding-top 方案要求父容器必须有明确宽度（比如 <code>width: 100% 或 max-width），否则百分比无基准可算；同时内容层的 inset: 0 若被其他定位规则覆盖（如 top: auto），也会导致内容塌进 padding 区域。这些细节一漏，整个 fallback 就失效。
