直接在aspect-ratio里用var(--ratio)会失败，因为--ratio若为字符串"16/9"则被解析为非法值而丢弃，若为小数1.777则不符合aspect-ratio只接受num / num或auto的语法要求；正确做法是用calc(var(--ar-width) / var(--ar-height))让引擎识别合法比值。
为什么直接在 aspect-ratio 里用 var(--ratio) 会失败？
因为 aspect-ratio 的值必须是数字比（如 16 / 9）或关键字（auto），而 CSS 变量只能代入“计算后能解析为合法值”的表达式。直接写 aspect-ratio: var(--ratio);，如果 --ratio 是字符串 "16/9"，浏览器会当作无效值丢弃；如果是数字 1.777，则失去比例语义——aspect-ratio 不接受小数，只接受 num / num 形式。
正确写法：用 calc() 拆解变量再组合
把宽高分别定义为独立变量，再用 calc() 构造合法的 num / num 表达式：
:root {
--ar-width: 16;
--ar-height: 9;
}
<p>.box {
aspect-ratio: calc(var(--ar-width) / var(--ar-height));
}-
--ar-width和--ar-height必须是纯数字（不能带单位、不能是字符串） -
calc()在这里不是做运算优化，而是让 CSS 引擎识别出这是可计算的比值表达式 - 这个写法在 Chrome 103+、Firefox 110+、Safari 16.4+ 均有效；旧版 Safari 需回退到
padding-top技巧
动态切换比例时要注意什么？
修改 --ar-width 或 --ar-height 后，aspect-ratio 会自动重算，但有两点容易踩坑：
- 不要用 JavaScript 直接设置
style.aspectRatio = 'var(--ar-width) / var(--ar-height)'—— 这会写死字符串，无效 - 应改用
element.style.setProperty('--ar-width', '4')，让 CSS 引擎重新解析calc() - 若比例依赖响应式（比如横屏切 4/3、竖屏切 3/4），推荐用媒体查询配合不同
:root变量，而非 JS 切换，更稳定
兼容性 fallback 怎么加才不冲突？
当 aspect-ratio 不被支持时，padding-top 百分比方案仍需生效，但二者不能共存——现代浏览器会优先用 aspect-ratio，所以 fallback 要包裹在 @supports not (aspect-ratio: 1) 里：
立即学习“前端免费学习笔记（深入）”；
.box {
aspect-ratio: calc(var(--ar-width) / var(--ar-height));
}
<p>@supports not (aspect-ratio: 1) {
.box {
position: relative;
width: 100%;
}
.box::before {
content: '';
display: block;
padding-top: calc((var(--ar-height) / var(--ar-width)) <em> 100%);
}
.box > </em> {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
}注意：padding-top 的百分比基于父容器宽度，所以要算 height / width，和 aspect-ratio 的顺序相反；变量名保持一致，但数值含义要对应上。
真正麻烦的是嵌套容器里多个比例同时存在，每个都要单独设变量 + 单独写 @supports 块——别图省事合并，CSS 不会跨作用域复用变量计算结果。
