aspect-ratio 不支持 calc() 或运算表达式，仅接受字面量分数（如 16/9）、小数或 auto；变量需定义为无单位无引号的分数字符串（如 --ratio: 16/9），且必须直接 var(--ratio) 使用，不可拆分运算。
不能用 CSS 变量做运行时除法计算宽高比，aspect-ratio 不接受 calc() 或字符串拼接；但可以用变量直接代入分数值（如 16/9），前提是浏览器支持且写法严格合规。
为什么 aspect-ratio: calc(var(--w) / var(--h)) 会失效
这个写法在所有浏览器里都无效：aspect-ratio 属性不支持 calc() 包裹，也不解析带运算符的表达式。即使变量本身是数字，calc() 在这里只是被忽略，整条声明静默丢弃。
-
--w: 16;和--h: 9;单独定义没问题，但无法在aspect-ratio中参与数学运算 - 浏览器只接受字面量分数（
16/9）、小数（1.777）或auto，不接受任何函数、引号、空格或单位 - 写成
--ratio: "16/9"或--ratio: 16/9px同样失败——引号让值变成字符串，单位导致解析中断
aspect-ratio: var(--ratio) 的正确写法与限制
这是唯一能用变量控制比例的合法方式，但对变量值和浏览器环境有硬性要求：
- 变量必须定义为无单位、无空格、无引号的分数字符串，例如：
:root { --ratio: 21/9; } - 使用时必须直接代入：
aspect-ratio: var(--ratio);，不能加calc()、不能拆成var(--w) / var(--h) - Safari ≤ 15.3 会整条规则忽略——不是变量不生效，而是整个
aspect-ratio声明被丢弃 - 若变量未定义且没设 fallback，
aspect-ratio: var(--ratio, 16/9)中的16/9会生效，但仅限现代浏览器
Flex/Grid 容器中 aspect-ratio 看似失效的真实原因
它其实没失效，只是缺少计算基准——aspect-ratio 需要至少一个确定尺寸（宽或高）才能推导另一轴，而 Flex/Grid 常默认不提供这个约束：
- Flex 子项没设
flex-basis或width，且父容器没给明确宽度 → 宽度不确定，比例无从触发 - Grid item 的列轨道用
auto或minmax(0, 1fr)→ 列宽未定，aspect-ratio失去参考 - 同时声明
height: 200px和aspect-ratio: 1/1→ 高度已被固定，比例被覆盖，浏览器优先采用显式高度 - DevTools 的 computed 面板里若显示
aspect-ratio: auto，说明该属性根本没进入计算流程
兼容旧浏览器时变量 fallback 的实际难点
你没法用变量驱动 padding-bottom fallback，因为它的百分比值必须是静态数字：
-
padding-bottom: calc(var(--h) / var(--w) * 100%)在 Safari ≤ 15.3 和部分微信 iOS 客户端里不工作 - @supports 无法检测变量是否生效，所以不能靠
@supports (aspect-ratio: var(--ratio))来包裹 - 真实可行的降级是双写：先写
padding-bottom: 56.25%（16:9 固定值），再用@supports (aspect-ratio: 1/1)覆盖为变量版 - 如果项目需多比例 fallback（如 4:3、9:16），得靠构建脚本生成对应 CSS，或服务端注入不同 class
最易被忽略的一点：变量本身不会改变 aspect-ratio 的计算时机——它只改数值，不解决“父容器尺寸未定”这个底层前提。哪怕变量再灵活，容器宽度没锚定，比例就永远算不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
