scss无法动态生成响应式aspect-ratio值，因其在编译阶段完成，不能响应视口变化、容器尺寸或媒体查询状态；所有变量、插值和运算均输出静态比值，如$aspect-16by9: 16/9编译后即为aspect-ratio: 16/9。
SCSS 不能动态生成 aspect-ratio 的响应式值
直接说结论：aspect-ratio 必须在运行时由浏览器计算，SCSS 在编译阶段就结束了，它无法读取容器实际宽度、视口变化或媒体查询状态。所谓“用 SCSS 生成响应式 aspect-ratio”，本质只是把几个写死的比值提前算好，比如 $ratio: 16 / 9 编译后就是 aspect-ratio: 16 / 9，和手写没区别。
常见错误现象：@media (max-width: 768px) { .card { aspect-ratio: #{1 / 1}; } } 看似用了 SCSS 插值，但该规则仍静态编译为固定断点下的声明，无法替代真正的媒体查询逻辑。
- SCSS 的
calc()、#{}、变量运算全在构建时完成，不随屏幕缩放重算 - 想让比例随视口或父宽变化？必须靠 CSS 原生机制：媒体查询、
aspect-ratio自身、或padding-bottomhack - 若项目已用 SCSS 管理主题变量（如
$aspect-video: 16 / 9），它只适合统一维护常量，别指望它“响应”
怎样用 SCSS 合理组织 aspect-ratio 常量与降级方案
SCSS 最实用的定位是「集中管理、条件输出、避免硬编码」，尤其配合 @supports 和 fallback 方案时。
推荐结构：
$aspect-16by9: 16 / 9;
$aspect-4by3: 4 / 3;
$aspect-square: 1 / 1;
<p>.ratio-video {
width: 100%;
@supports (aspect-ratio: 1 / 1) {
aspect-ratio: $aspect-16by9;
}
/<em> 降级：仅当不支持 aspect-ratio 时才生效 </em>/
&::before {
content: "";
display: block;
padding-bottom: percentage(9 / 16); // 自动算 56.25%
}</p><blockquote><ul><li>{
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
}</li></ul></blockquote>
- 用
percentage(9 / 16)替代手算56.25%，避免精度误差和维护成本 -
@supports块必须包裹新属性，且放在降级规则之后——CSS 解析顺序决定旧浏览器跳过它 - 别在同一个选择器里混写
aspect-ratio和padding-bottom；应分层：现代逻辑走@supports，fallback 走常规规则
为什么不能用 SCSS 的 clamp() 或 calc() 拼接 aspect-ratio
aspect-ratio 接收的是无单位比值（如 16 / 9），不是长度，因此所有依赖长度单位的 CSS 函数都无效。
这些写法全部非法，浏览器会静默忽略或报解析错误：
-
aspect-ratio: clamp(4 / 3, 16 / 9, 1 / 1)——clamp()只接受<length></length>、<frequency></frequency>等，不接受比值 -
aspect-ratio: calc(16 / 9)——calc()不支持除法运算符用于比值，且结果类型不匹配 -
aspect-ratio: #{$min-ratio} / #{$max-ratio}—— SCSS 插值只能输出字符串，无法生成合法的比值语法
真正响应式切换比例，唯一可靠方式是媒体查询：
.card {
aspect-ratio: 16 / 9;
@media (max-width: 768px) {
aspect-ratio: 4 / 5;
}
@media (min-aspect-ratio: 16 / 9) {
aspect-ratio: 1 / 1;
}
}
容易被忽略的兼容性细节：Safari 15.4–16.3 和微信 iOS
即使写了 @supports (aspect-ratio: 1 / 1)，Safari 15.4–16.3 在 display: flex 容器中仍可能失效；微信 iOS v8.0.4x 识别该属性但渲染错位——这不是 SCSS 能解决的问题，而是 CSS 运行时环境缺陷。
- 不要依赖 UA 判断 + SCSS 条件编译来“修复” Safari flex bug，它发生在运行时，SCSS 早编译完了
- 稳妥做法：对关键场景（如视频封面、广告位）统一降级为
padding-bottom方案，或加display: grid绕过 Safari flex 问题 - 如果必须用
aspect-ratio，记得检查 DevTools 的 Computed 面板：若aspect-ratio条目被划掉或未出现，说明当前环境不支持或被更高优先级规则覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
