less仅在编译期计算，运行时等比缩放依赖css原生机制（如padding-top百分比、aspect-ratio或transform: scale()）；height: 50%失效因高度百分比依赖父容器显式高度，而padding百分比按父宽计算，故可用percentage(@ratio-h / @ratio-w)生成padding-top值，并封装.aspect-ratio mixin统一处理宽高比。
Less 本身不能实现运行时等比缩放，它只负责编译期计算；真正起作用的是 CSS 原生机制（如 padding-top 百分比、aspect-ratio 或 transform: scale()），Less 只是用来简化重复公式和避免手算错误。
为什么直接写 height: 50% 不行
CSS 中 height 的百分比值依赖父容器高度，而多数容器高度未显式定义（由内容撑开），导致 height: 50% 失效。Less 编译时无法改变这一行为，它不会给父元素“自动补高度”。
- 别指望
@ratio: 9 / 16; height: @ratio * 100%;能让容器自适应——编译后就是height: 56.25%;，依然卡在父高未定义的问题上 -
padding-top和padding-bottom的百分比是按父元素宽度计算的，这才是能锚定宽高比的关键路径 - 现代方案优先用
aspect-ratio: 16 / 9;，但需注意 Safari 旧版本（≤15.4）不支持，得降级到 padding 技巧
用 percentage() 算 padding-top 值的正确写法
Less 的 percentage() 函数能把小数转成带 % 的字符串，但它要求输入是纯数字，且分子分母单位必须一致。
- 合法：
@ratio-w: 16; @ratio-h: 9; padding-top: percentage(@ratio-h / @ratio-w);→ 编译为padding-top: 56.25%; - 非法：
@ratio-w: 16px; @ratio-h: 9px; padding-top: percentage(@ratio-h / @ratio-w);→ 报错Operation on an invalid type - 常见倒算错误：
percentage(16 / 9)得 177.777%，实际要的是percentage(9 / 16) - 别写成
(@ratio-h / @ratio-w) * 100%，Less 不允许带单位的字面量参与乘法运算
封装可复用的 .aspect-ratio mixin
避免每个容器都重复写 position: relative、padding-top、overflow: hidden 等代码，抽成 mixin 最省事。
- 基础结构必须包含：
height: 0;（配合 padding 撑高）、overflow: hidden;（防内容溢出破坏比例） - 推荐默认参数：
.aspect-ratio(@ratio-w: 16, @ratio-h: 9) { ... }，调用时写.aspect-ratio(4, 3)更直观 - 子内容层统一用
.aspect-ratio-content类，内部固定top: 0; left: 0; width: 100%; height: 100%; - 别在
@supports块里调用这个 mixin——Less 编译时无法生成条件样式，降级逻辑得单独写死或由 JS 控制
字体和尺寸的等比缩放该交给谁
Less 可以帮你把设计稿像素值转成 vw 系数或 clamp() 参数，但它不参与运行时缩放决策。
- 按钮高度换算示例：
@btn-height-vw: 80 / 750 * 100vw;→ 编译为height: 10.666667vw; - 别写
@size: 80px; height: @size * (100vw / 750);—— Less 不支持px * vw运算，报Operation on an invalid type - 文字大小慎用纯
vw，建议用clamp()：例如font-size: clamp(1.125rem, 4vw, 1.5rem);，Less 只负责组织变量，不干预计算时机 -
transform: scale()是视觉缩放，不影响布局流，适合卡片/图标等局部缩放，但文本可能模糊，且事件区域尺寸不变
最容易被忽略的是：Less 编译完就结束了，它不管设备 DPR、视口变化、父容器重排，所有“动态”效果都得靠 CSS 原生能力承接。写 Less 时，脑子里得随时分清哪部分是编译期算的，哪部分是浏览器 runtime 执行的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
