padding-top 百分比能锁住宽高比是因为其值按父元素宽度计算，如16:9容器设padding-top: 56.25%即可锚定比例；需配合position: relative与absolute子元素实现等比缩放。
直接用 width 和 height 百分比无法实现等比缩放，因为 height: 50% 依赖父容器高度，而父容器高度往往未定义；Less 是编译时预处理器，不参与运行时尺寸计算——真要等比缩放，得靠 CSS 原生机制，再用 Less 简化重复运算。
为什么 padding-top 百分比能锁住宽高比
CSS 中 padding-top 和 padding-bottom 的百分比值是按父元素宽度计算的，不是高度。这个特性恰好可用来“锚定”比例：比如 16:9 容器，高度应为宽度 × 9/16 = 56.25%，设 padding-top: 56.25%，再配合 position: relative 和子元素 position: absolute，就能让内容撑满且不失真。
-
percentage(@ratio-h / @ratio-w)必须用 Less 内置函数包裹，不能写成(@ratio-h / @ratio-w) * 100%，否则 Less 报错Operation on an invalid type - 分子分母单位必须一致（都为数字），
@ratio-w: 16;合法，@ratio-w: 16px;会报错 - 常见比例倒算错误：
percentage(16 / 9)得 177.777%，实际该用percentage(9 / 16)
如何封装可复用的 aspect-ratio mixin
避免每个容器都手写 position、padding-top、overflow 等重复逻辑，用 mixin 抽离比例控制和基础结构。
- 必须显式设
height: 0和overflow: hidden，否则 padding 撑开的空间可能被内容溢出破坏 - 参数默认值建议设为
@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 控制
字体等比缩放该用 vw 还是 calc + Less 插值
Less 无法在运行时动态响应视口变化，所以字体缩放必须交给 CSS 原生能力；Less 只负责把设计稿像素值转成可维护的系数或边界值。
- 用
vw最稳妥：@btn-height-vw: 80 / 750 * 100vw;编译为height: 10.666667vw，浏览器自动缩放 -
calc()必须用插值语法：font-size: ~"calc(@{base} * 1.2)"，直接写calc(@base * 1.2)会报错 - 别混单位运算：
@size: 80px; height: @size * (100vw / 750);不合法，Less 不支持px * vw -
clamp()的中间值必须是原生可解析表达式（如2.5vw），不能塞 Less 运算结果，否则失去响应性
容易被忽略的兼容性与渲染细节
Less 编译完就结束了，它不管设备 DPR、视口缩放、用户字号偏好——这些全靠 CSS 运行时机制兜底。
- 小数像素（如
14.3px）在不同 DPR 下渲染模糊，round()是必须的，floor()或ceil()不够视觉友好 -
transform: scale()比改font-size或width更安全：它不触发重排，不影响事件区域原始尺寸 - 移动端若只用
px缩放，2x 屏上文字会变小——这不是 Less 的锅，是单位选错了，优先用rem或vw配合根元素动态设置 -
@media里不能覆盖全局变量，变量作用域是块级的；断点字体缩放必须每个媒体查询内独立调用 mixin
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
