必须用@supports not (aspect-ratio: 16/9)做特性检测并降级，旧浏览器会忽略该属性导致容器塌缩；降级需同时设置position: relative、padding-top百分比和absolute子元素，且数值须精确计算。
直接用 aspect-ratio 会失效，旧浏览器不认
Chrome 88 / Firefox 89 / Safari 15.4 之前版本（比如 iOS 15.3、IE/Edge Legacy、部分企业内网环境）会完全忽略 aspect-ratio，元素退化为无高度的空盒，视觉上直接塌缩或撑开错位。这不是“效果不好”，而是属性被丢弃——连计算逻辑都不触发。
所以不能只写 aspect-ratio: 16 / 9 就完事。必须做特性检测 + 降级，且降级方案得真正生效，不是摆设。
@supports not (aspect-ratio: 16 / 9) 是必须写的检测条件
这个检测比 UA 判断更可靠：它基于真实渲染能力，而非字符串匹配，能覆盖 Safari 15.0–15.3、Chrome 87 等“看起来新但实则不支持”的边缘版本。
常见错误是漏掉 not 或括号位置不对，比如写成 @supports (aspect-ratio: 16 / 9) { ... } ——这反而会让旧浏览器执行降级代码，新浏览器跳过，彻底反了。
立即学习“前端免费学习笔记（深入）”；
- 正确写法必须是
@supports not (aspect-ratio: 16 / 9) - 检测块里要完整覆盖容器定位、内边距、子元素占位三部分，缺一不可
- 别把降级样式写在
@supports外面，否则旧浏览器会叠加两套规则，引发冲突
padding-top 百分比技巧必须配 position: relative 和 absolute 子项
原理是利用 padding-top 的百分比值按父宽计算，从而“预留”出比例空间。但它本身不产生高度，只是 padding，所以必须靠绝对定位子元素来撑满这个空间。
常见错误现象：写了 padding-bottom: 56.25%，但容器还是塌陷——根本原因是没设 position: relative，导致子元素的 position: absolute 相对于 body 定位，脱离上下文。
- 父容器必须加
position: relative - 子元素（如
iframe或video）必须加position: absolute; top: 0; left: 0; width: 100%; height: 100% -
padding-bottom值要算准：16:9 → 9 ÷ 16 = 0.5625 → 56.25%，1:1 → 100%，9:16 → 177.78%
Flex/Grid 容器里用 aspect-ratio 要防 Safari 旧版静默失效
即使浏览器声明支持 aspect-ratio，Safari 15.0–15.3 在 display: flex 或 display: grid 的子项上会静默忽略该属性——控制台无报错，开发者工具里能看到属性灰掉，但布局已变形。
这时仅靠 @supports 检测不够，因为 Safari 这些版本会报告“支持”，实际不执行。必须额外加兜底：
- 对 Flex/Grid 子项，统一加
min-width: 0; min-height: 0，强制触发重计算（Safari 旧版 bug 修复点） - 若仍不稳定，直接放弃在这些容器里用
aspect-ratio，改用 padding-top 方案，更可控 - 不要依赖
object-fit补救：它只管内容裁剪，不解决容器自身比例丢失问题
最易被忽略的一点：降级方案里的 padding-bottom 值必须是精确浮点数，不能四舍五入成 56% 或 56.3%——差 0.25% 在窄屏下就可能露出背景或切掉关键画面。算好再贴，别估。
