最简路径是直接用 aspect-ratio: var(--ratio)，但变量值必须为无引号、带空格的分数字符串（如 16 / 9），且容器需有确定尺寸；Safari 15.4–16.3 在 flex 中不支持，fallback 需配合 position: absolute 和静态 padding-top。
直接用 aspect-ratio: var(--ratio) 是最简路径，但变量值必须是 16 / 9 这类分数字符串，不能是小数、百分比或带引号的字面量——否则浏览器解析失败或降级为 auto。
为什么 aspect-ratio: var(--ratio) 有时不生效
常见失效场景不是语法写错，而是变量值类型不对或容器缺少基准尺寸：
-
--ratio: 1.777或--ratio: "16/9"→ 浏览器无法识别为合法比例值，computed 值显示auto -
aspect-ratio需要至少一个轴有确定尺寸（比如width: 100%），父容器若为display: flex且未设高度，或grid列宽为auto，它根本不会触发计算 - Safari 15.4–16.3 在
flex容器里会忽略子元素的aspect-ratio，即使变量正确也白搭
aspect-ratio 变量值怎么写才安全
变量只存分数字符串，不参与运算，语义清晰且无兼容性风险：
- 正确写法：
:root { --ratio: 16 / 9; }或内联：<div class="video" style="--ratio: 21 / 9;"> - 禁止加空格以外的字符：不能写成
--ratio: 16/9（少空格）、--ratio: "16 / 9"（引号包裹）、--ratio: 56.25%（百分比） - 推荐抽成预设类：
.ratio-4x3 { --ratio: 4 / 3; }，复用时直接组合：<div class="video ratio-4x3">
必须配对的三个样式才能真正“响应”
aspect-ratio 只管比例，不管尺寸上限和内容渲染。漏掉任意一项，都会在大屏或移动端出问题：
立即学习“前端免费学习笔记（深入）”；
-
width: 100%—— 提供横向基准，否则比例无从推导 -
max-width: 800px（按需调整）—— 防止超宽，避免小屏正常、大屏撑爆布局 -
video { width: 100%; height: 100%; object-fit: cover; }—— 子元素必须填满且控制裁切方式；不加object-fit，视频可能溢出或留黑边
旧浏览器 fallback 别堆 CSS hack
IE 和 Safari ≤15.3 不支持 aspect-ratio，但 fallback 不该靠多行 padding 冗余声明，而应分层处理：
- 先写现代方案：
aspect-ratio: var(--ratio); - 再紧跟降级：
padding-top: 56.25%;（静态值，别用 calc + 变量） - 关键：子元素必须
position: absolute，否则 fallback 下内容会被 padding 顶出容器外——这是最常被忽略的视觉翻车点 - 如果项目需兼容微信 iOS v8.0.4x，建议 UA 检测后统一降级，因为其
aspect-ratio渲染异常但又不报错
真正极简的核心不是代码行数少，而是变量只承担语义表达（16 / 9），所有尺寸逻辑交给标准属性组合；一旦开始让变量参与 calc 计算或混用单位，就等于主动放弃 Safari 15.x 的稳定支持。
