直接用 vw 写字体易失控，因小屏过小、大屏过大；Less 可封装 clamp() 降级写法、多断点响应式及注释提醒 vw 与根字体无关，并指出 iOS 横竖屏切换时的闪动问题。
为什么直接用 vw 写字体容易“失控”
直接写 font-size: 4vw 看似简单，但视口缩放时字体在小屏上会过小（比如手机上变成 12px 以下），大屏又可能爆炸（4K 屏上冲到 80px+）。这不是响应式，是“随波逐流”。Less 本身不解决这个问题，但能帮你封装一套可控的计算逻辑。
用 Less 函数封装 clamp() 的降级兼容写法
CSS clamp() 是理想解（clamp(16px, 4vw, 24px)），但旧版 Safari 和 IE 完全不支持。Less 可以生成带 fallback 的声明，让浏览器按顺序解析：
.responsive-font(@min: 16px, @max: 24px, @vw-base: 4vw) {
font-size: @min;
font-size: clamp(@min, @vw-base, @max);
}编译后输出：
font-size: 16px; font-size: clamp(16px, 4vw, 24px);
现代浏览器用 clamp()，老浏览器回退到 @min —— 注意：这里没做 polyfill，只是安全兜底。
需要精确控制断点？用 Less map + 循环生成多档 font-size
当设计稿明确要求「在 320px–768px 用 18px，769px–1200px 用 20px，1201px+ 用 22px」时，硬写媒体查询太啰嗦。可以用 Less map 配合 .each()：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
@font-sizes: (
small: 320px 18px,
medium: 769px 20px,
large: 1201px 22px
);
<p>.each(@font-sizes, {
@breakpoint: extract(@value, 1);
@size: extract(@value, 2);
@prev: if(@key = small, 0, extract(extract(@font-sizes, @key - 1), 1));</p><p>@media (min-width: @breakpoint) and (max-width: ~"calc(@{prev} - 1px)") {
font-size: @size;
}
});实际更推荐简化版：只写 min-width，靠层叠覆盖（Less 不支持动态减法，上面写法易错）：
- 手动定义断点变量：
@bp-sm: 320px; @bp-md: 769px; @bp-lg: 1201px; - 用嵌套写法避免重复：
{ @media (min-width: @bp-md) { font-size: 20px; } } - 别依赖 Less 自动算「上一档上限」——CSS 媒体查询本就不保证互斥，靠顺序和
min-width更稳
vw 计算必须考虑根元素 font-size 吗？
不需要。vw 是视口宽度的 1%，和 html 或 body 的 font-size 无关。但如果你同时用了 rem 基准（比如 html { font-size: calc(100vw / 37.5); }），再混用 vw 就容易混乱。Less 里可以加注释提醒：
// ⚠️ 注意：此处 vw 与 root font-size 无关
// 若已设 rem 基准，请统一用 rem 或单独用 vw，勿交叉
.responsive-title {
.responsive-font(18px, 32px, 6vw);
}真正容易被忽略的是：iOS Safari 在横竖屏切换时，vw 会按视觉视口（visual viewport）重新计算，导致字体闪动。加 viewport meta 的 width=device-width 能缓解，但无法根治——这时候不如改用 clamp() 或 JS 动态监听 resize。
