<p>Less变量参与字体计算需带单位或显式转换，如@base: 16px; font-size: round(@base * 1.2)；断点缩放用.mixin配合媒体查询实现；round()取整规避小数像素渲染问题；单位应优先选rem/vw而非依赖DPR静态值。</p>
Less变量怎么参与字体计算？
Less变量本身不支持直接在font-size中做动态运算（比如@base-font * 1.2），但可以配合unit()、round()和单位转换安全使用。关键点是：所有参与运算的值必须带单位，或显式转换单位，否则Less会报Operation on an invalid type错误。
- ✅ 正确写法：
@base: 16px; font-size: round(@base * 1.2); - ❌ 错误写法：
@base: 16; font-size: @base * 1.2px;（@base无单位，乘法失败） - 单位混用要小心：
em和px不能直接相乘，需统一为数值后加单位，例如unit(@base / 16, em) * 1.2
如何用Less实现断点驱动的阶梯缩放？
响应式字体缩放不是简单线性插值，而是按断点“跳变”——比如小屏用14px，中屏16px，大屏18px。Less里靠@media嵌套+变量重定义实现，但要注意：变量作用域是块级的，不能跨@media直接覆盖。
- 推荐模式：用
.font-scale()混合（mixin），传入基准值和缩放系数，每个断点内调用一次 - 示例：
.font-scale(@base, @ratio) { font-size: round(unit(@base, px) * @ratio); } @media (min-width: 768px) { .title { .font-scale(16px, 1.1); } } @media (min-width: 1024px) { .title { .font-scale(16px, 1.25); } } - 避免在
@media外定义全局@font-size再试图修改——Less编译时变量已固化，不会响应断点变化
为什么用round()而不是直接floor()或ceil()？
浏览器对小数像素渲染不一致，尤其14.3px在不同DPR下可能模糊或锯齿。round()强制取整能规避这类渲染问题，且比floor()更符合视觉预期（14.6px → 15px比14px更接近原意）。
-
round(14.3)→14，round(14.6)→15 - 如果需要向下取整（如严格控制行高），才用
floor()，但字体场景极少需要 - 别忘了给结果加单位：
round(@size) + px或unit(round(@size), px)，否则输出无单位数值，CSS无效
移动端适配时容易漏掉的DPR陷阱
Less编译发生在构建阶段，无法感知设备DPR。所以单纯用px缩放，在2x屏上文字会显得小——这不是Less的问题，而是单位选择逻辑问题。真正可靠的阶梯缩放应基于rem或vw，而Less变量只负责生成对应值。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：根元素
font-size用JS或媒体查询动态设（如html { font-size: calc(16px * (100vw / 375)); }），Less变量只生成rem倍数 - 示例：
@scale-sm: 0.875rem; @scale-md: 1rem; .title { font-size: @scale-md; } - 千万别在Less里写
@dpr: 2; font-size: @base * @dpr;——@dpr是静态值，无法适配真实设备
变量运算本身很轻量，但响应式字体的复杂性不在Less表达式里，而在单位策略和根字号控制上。把Less当计算器用，别当运行时引擎。
