用css变量配aspect-ratio可提升可配置性与复用性，但需注意safari≤15.3整条规则失效、padding-bottom fallback无法用变量、全局命名污染及渲染上下文干扰等问题。
直接用 aspect-ratio 就能锁定比例，CSS 变量只是让它可配置、易复用；但别指望变量本身能“触发”响应式——它不改变计算时机，只改数值来源。
为什么用 CSS 变量配 aspect-ratio 而不是硬写数字
硬编码 aspect-ratio: 16 / 9 在多卡片、多尺寸场景下维护成本高。比如商品图要 4:3、封面图要 16:9、头像要 1:1，全写死会导致样式重复、改一处漏十处。
用变量后，只需统一管理比例值，HTML 层通过 class 或 data-* 控制行为：
-
--ratio-w: 16和--ratio-h: 9分开定义，方便动态计算（如服务端注入） - 变量可被 JS 读取并修改，适合运行时切换比例（如编辑器预览）
- PostCSS 或构建工具能自动内联变量值，避免运行时计算开销
注意：aspect-ratio: var(--ratio-w) / var(--ratio-h) 是合法写法，但 Safari ≤ 15.3 会完全忽略整条声明——不是只忽略变量，是整条规则失效。
兼容旧浏览器时变量怎么 fallback
@supports 不支持检测变量是否生效，所以不能靠 @supports (aspect-ratio: 1 / 1) 包裹带变量的声明。真要降级，得双写：
img.card-img {
/* 兜底：padding-bottom 方案 */
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 手动写死 16:9，无法用变量替代 */
}
@supports (aspect-ratio: 1 / 1) {
img.card-img {
/* 新方案：启用变量 */
aspect-ratio: var(--ratio-w) / var(--ratio-h);
padding-bottom: 0;
}
}
关键点：
- padding-bottom 的百分比值无法用 CSS 变量动态计算（
calc(var(--ratio-h) / var(--ratio-w) * 100%)在某些旧浏览器里不工作） - 所以 fallback 必须是固定值，或由构建时脚本生成多套 CSS
- 微信 iOS 客户端（v8.0.4x）识别
aspect-ratio但渲染错乱，建议 UA 检测后强制走 padding 方案
变量命名和 scope 容易踩的坑
别把比例变量挂到 :root 下全局污染。不同模块可能需要不同默认值：
- 卡片组件用
--card-ratio-w/--card-ratio-h，避免和视频组件的--video-ratio冲突 - 如果父容器用了
display: grid或flex，子元素的aspect-ratio可能被 grid track 或 flex basis 覆盖——此时变量再灵活也没用 - 变量值必须是无单位数字（
16，不是16px），否则aspect-ratio解析失败，整条规则静默丢弃
测试时打开 DevTools 的 computed 面板，直接看 aspect-ratio 是否显示为 16 / 9，而不是 unset 或空值——这是变量未生效最直观的信号。
真正难的不是写对变量，而是确认每个使用它的容器都处在正确的渲染上下文里：position、display、overflow、甚至 transform 都可能让 aspect-ratio 表现异常。变量只是让错误更隐蔽，而不是让逻辑更健壮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
