Less 中直接写 aspect-ratio: 16/9 会报错或失效，因其将 / 视为除法运算符；正确写法是用 ~"@{ratio}" 脱敏传入字符串如 "16/9"，并手动添加 @supports fallback。
aspect-ratio 在现代浏览器中已稳定支持，但 Less 本身不解析 CSS 属性值（如 16/9），直接写会触发除法运算报错。必须用引号包裹或转义，否则 Less 编译器把 16/9 当成数学表达式，编译成 1.7777777... 或直接报错。
Less 中写 aspect-ratio 为什么会报错
Less 默认将 / 视为除法操作符。哪怕你写 aspect-ratio: 16/9;，Less 会尝试计算 16 ÷ 9 → 得到小数，再输出为 aspect-ratio: 1.7777777778; —— 这不是合法的 aspect-ratio 值，浏览器忽略。
- 错误现象：
aspect-ratio: 4/3;编译后变成aspect-ratio: 1.3333333333;，样式失效 - 更糟的是：若变量参与，如
@w: 16; @h: 9; aspect-ratio: @w/@h;，结果仍是小数，且丢失比例语义 - 不能靠
~"16/9"（旧版 Less 字符串插值），它会输出带引号的字符串，CSS 不认
正确封装方式：用引号 + ~ 脱敏
唯一可靠写法是显式传入带斜杠的字符串，并用 ~ 去掉引号，让 CSS 收到原生 16/9：
aspect-ratio-mixin(@ratio) {
aspect-ratio: ~"@{ratio}";
}
<p>.card {
width: 100%;
.aspect-ratio-mixin("16/9");
}-
~"@{ratio}"是关键：它把变量值原样注入，不加引号、不计算 - 调用时必须传字符串，如
"4/3"、"1/1"，不能传数字或未加引号的4/3 - 可扩展为带默认值：
.aspect-ratio-mixin(@ratio: "16/9") { ... }
兼容 fallback 必须手动写，Less 不会自动降级
@supports (aspect-ratio: 1/1) 无法在 Less 中生成条件规则——它只是 CSS 运行时特性，Less 编译期不感知浏览器能力。所以 fallback 得显式并列书写：
立即学习“前端免费学习笔记（深入）”；
.responsive-box {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* fallback for 16:9 */
<p>@supports (aspect-ratio: 1/1) {
aspect-ratio: ~"16/9";
padding-bottom: 0;
}</p><blockquote><ul><li>{
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
}
}- 注意顺序：
padding-bottom写在前面，@supports块里重置为0，确保支持者不继承 fallback - 别指望 Less 变量能触发
@supports自动开关——它纯属 CSS 层逻辑 - 若项目需兼容 Safari 15.3 或微信 X5 内核，这个 fallback 就不是“可选”，而是必写
动态比例变量要提前算好，别在 Less 里做运行时除法
有人想用 @w: 16; @h: 9; .aspect-ratio-mixin("@{w}/@{h}");，这看似聪明，但风险高：
- 若
@w或@h含单位（如16px），拼出"16px/9px"，浏览器报语法错误 - 若值含空格或特殊字符，引号包裹易漏，编译失败
- 更稳妥的是：比例逻辑收口在 JS 或构建脚本里，Less 只接收干净字符串
- 例如统一管理：
@card-ratio: "4/3"; .aspect-ratio-mixin(@card-ratio);
真正麻烦的从来不是怎么写那一行 aspect-ratio，而是当 Safari 15.4+ 和微信 X5 并存于同一线上环境时，你得同时维护两套尺寸逻辑，且不能依赖任何“自动”降级机制。
