Less中无法直接用calc()实现流式字体缩放，因编译器不解析且存在兼容问题；最稳妥方案是用Less函数配合媒体查询分段插值，并封装为参数化mixin生成断点字号。
Less中用calc()混合单位做流式字体缩放行不通
直接在font-size里写calc(16px + 2vw)看似简洁，但Less编译器会把它当纯字符串处理，不参与运算；更关键的是，CSS原生calc()在font-size中虽已支持，但IE11及部分旧Android WebView仍存在兼容问题，且无法配合Less变量做条件缩放。
用Less函数+媒体查询分段控制最稳妥
流式缩放本质是“在区间内线性变化”，而Less不支持运行时视口计算，只能靠预设断点模拟。核心思路是：定义最小/最大字号、对应最小/最大视口宽度，再用插值公式生成中间档位。
-
@min-font: 14px—— 视口≤320px时的字号 -
@max-font: 18px—— 视口≥768px时的字号 - 用
unit((@max-font - @min-font) / (768 - 320), px)算出每像素增长量（约0.00833px/px） - 实际用
@min-font + ((@viewport-width - 320) * 0.00833)推导各断点值，再转为@media规则
推荐用参数化mixin封装响应式字体逻辑
避免重复手算，把插值逻辑封装进mixin，传入范围和目标值即可生成完整媒体查询链：
.font-fluid(@min-vw: 320, @max-vw: 768, @min-size: 14px, @max-size: 18px) {
font-size: @min-size;
@step: (@max-size - @min-size) / (@max-vw - @min-vw);
@size-480: unit(@min-size + ((480 - @min-vw) * @step), px);
@size-640: unit(@min-size + ((640 - @min-vw) * @step), px);
@size-768: @max-size;
<p>@media (min-width: 480px) { font-size: @size-480; }
@media (min-width: 640px) { font-size: @size-640; }
@media (min-width: 768px) { font-size: @size-768; }
}</p>
调用：.font-fluid(320, 768, 14px, 18px); —— Less会在编译时算出15.25px、16.75px等精确值，输出纯CSS，无运行时依赖。
注意vw单位在移动端的陷阱
直接用vw做字体单位看似流式，但iOS Safari在横屏切换时会错误重算100vw（含地址栏高度），导致字体跳变；安卓部分版本对vh/vw初始渲染有延迟。如果必须用vw，务必加min/max-font-size兜底，并测试横竖屏切换场景。
真正需要动态响应的复杂排版，Less阶段只能做到“分段拟合”；真·连续流式得交给JavaScript或CSS clamp()——但那已超出Less能力边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
