aspect-ratio不支持CSS变量动态计算，仅接受无单位字面量分数（如16/9）；可靠方案是padding-top+calc()配合CSS变量，利用父宽百分比实现动态长宽比，并用@supports渐进增强。
aspect-ratio 不支持 CSS 变量动态计算
直接写 aspect-ratio: calc(var(--w) / var(--h)) 或 aspect-ratio: var(--ratio)（其中 --ratio 是 JS 动态设置的）——浏览器会静默忽略整条规则，容器可能塌陷或按默认尺寸渲染。原因很明确：CSS 的 aspect-ratio 属性只接受无单位、无空格、无引号的字面量分数（如 16/9），且该值必须在样式表解析阶段就确定，不参与运行时计算。
即使你用 :root { --ratio: 16/9; } 再写 aspect-ratio: var(--ratio);，也仅在 Chrome 88+、Firefox 89+、Safari 15.4+ 中有效；Safari ≤ 15.3 完全不识别，旧版 Edge 更不用提。
真正能用变量动态算比值的方案：padding-top + calc()
这是目前唯一兼容所有现代浏览器、支持变量参与运算、且稳定可控的方式。核心是利用「子元素 padding 百分比基于父容器宽度计算」这一 CSS 原生机制。
-
:root { --aspect-w: 16; --aspect-h: 9; }—— 宽高变量存为纯数字，便于后续除法运算 - 容器需设
position: relative; width: 100%; - 关键占位层写：
padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%); height: 0; - 内容层用
position: absolute; top: 0; left: 0; width: 100%; height: 100%;填满 - 别漏
box-sizing: border-box，否则边框会让实际尺寸超标
@supports 渐进增强：现代用 aspect-ratio，旧版回落 padding
你可以用 @supports (aspect-ratio: 16/9) 包裹原生方案，同时把 padding 方案作为 fallback：
立即学习“前端免费学习笔记（深入）”；
.aspect-container {
width: 100%;
}
@supports (aspect-ratio: 16/9) {
.aspect-container {
aspect-ratio: 16/9;
}
}
@supports not (aspect-ratio: 16/9) {
.aspect-container::before {
content: "";
display: block;
padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%);
}
.aspect-container > * {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
}注意：不要在同一个选择器里混写 aspect-ratio 和 padding-top，浏览器可能按不可预测顺序应用，导致布局抖动。
容易被忽略的继承与作用域陷阱
CSS 变量不是“全局常量”，它的值取决于当前元素是否能沿继承链读到定义。常见失效场景：
- 在子元素里写
padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%)，但--aspect-w只定义在某个中间祖先上，而该祖先写了--aspect-w: initial;→ 继承中断，计算结果为NaN，整个声明失效 -
--aspect-w: 16px（带单位）→calc(var(--aspect-h) / var(--aspect-w) * 100%)因单位不匹配报错，降级为无效值 - 容器本身没设
width（比如 Flex 子项未设flex-basis或父容器未给定宽度）→padding-top百分比失去计算基准，结果为 0
最稳妥的做法是：把变量定义在 :root，并在容器自身或其直接父级显式设 width（如 width: 100% 或 width: fit-content），避免依赖不确定的继承路径。
