padding-top百分比是唯一靠谱的fallback，因它基于CSS2.1规范、自IE6起稳定支持，始终按父容器宽度计算；需配合position: relative与absolute及inset: 0，且降级样式必须写在@supports外部。
直接用 padding-top 百分比 + position: relative/absolute 降级，别指望 @supports 自动兜底，也别信构建工具能“自动兼容”。
为什么 padding-top 百分比是唯一靠谱的 fallback
它基于 CSS2.1 规范，从 IE6 就稳定存在：padding-top 的百分比值始终按父容器宽度计算，不依赖任何新特性。而 aspect-ratio 是全新语法，没有前缀形式（如 -webkit-aspect-ratio），autoprefixer 不处理，非官方插件还可能误删整行。
-
padding-top: 56.25%对应 16:9（9 ÷ 16 = 0.5625），手算错误会导致比例严重失真 - 父容器必须设
position: relative，否则子元素position: absolute会相对于body定位 - 内容层需包裹并设
position: absolute; inset: 0（或top: 0; left: 0; width: 100%; height: 100%），否则内容会被padding区域“吞掉” - 避免同时写
height: 0和padding-top后又加aspect-ratio——旧浏览器取height: 0，直接压扁
@supports 写法必须外置，且顺序不能错
@supports (aspect-ratio: 1/1) 在 Chrome ≤27、IE、微信 X5、UC 等环境里根本不受支持，整块规则会被跳过。降级逻辑必须写在 @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; } } - 别写
@supports not (aspect-ratio: 1/1)——部分旧 WebView 解析失败会整段丢弃，导致无样式 - Safari 15.3–15.4 存在“识别
@supports但不渲染aspect-ratio” 的 bug，此时 fallback 样式根本不会触发
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)留弹性空间 - 视频/图片容器务必套一层
<div>：直接给<video>或<img>设aspect-ratio基本无效，它们有固有尺寸，会覆盖该属性
Tailwind 用户特别注意：类名不是万能的
Tailwind 的 aspect-[16/9] 只生成 aspect-ratio: 16 / 9，它不注入任何 fallback。你没手动写 pt-[56.25%] + relative + absolute 结构，就不会有降级。
-
pt-[56.25%]的百分比是按父容器宽度算的，必须配合relative定位父容器 - 内容层得用
absolute inset-0（或top-0 left-0 w-full h-full），否则会被padding区域“吞掉” - Safari 对斜杠语法
aspect-[16/9]解析极不稳定，更稳的写法是小数：aspect-[0.5625] - Flex/Grid 容器会让
aspect-ratio失效——这不是兼容性问题，而是布局优先级：它只对display: block或inline-block有效，子项默认是display: flex，需显式加block
真正容易被忽略的是：老浏览器连 @supports 都不认，降级必须写在外部；而现代浏览器里，aspect-ratio 和 padding-top 共存时，顺序错了整个 fallback 就崩——不是“多写点保险”，而是结构本身决定了兼容性边界。
