怎样使用Less实现自适应分辨率的Aspect Ratio_利用最新的CSS属性封装-css教程-PHP中文网

less 中直接写 aspect-ratio: 16/9 会报错或失效，因其将 / 视为除法运算符；正确写法是用 ~"@{ratio}" 脱敏传入字符串如 "16/9"，并手动添加 @supports fallback。

怎样使用less实现自适应分辨率的aspect ratio_利用最新的css属性封装

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：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

aspect-ratio-mixin(@ratio) {
  aspect-ratio: ~"@{ratio}";
}
<p>.card {
width: 100%;
.aspect-ratio-mixin("16/9");
}</p>

~"@{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%;
}
}</li></ul></blockquote>