直接写 font-size: 1.6rem 不够用，因为 rem 依赖根元素 font-size，硬编码导致维护难、换算易错、响应式成本高；需用 @base-font-size 变量统一基准，并通过 .rem() 混入安全转换，同时必须同步设置 html 字号。
为什么直接写 font-size: 1.6rem 不够用
因为 rem 是相对于根元素 html 的 font-size 计算的，而项目中常需适配不同设备或统一缩放基准（比如设计稿按 750px / 16px 换算），硬编码 rem 值会导致维护困难、换算易错、响应式调整成本高。
Less 本身不内置 rem 转换函数，必须靠变量 + 混入（mixin）或函数封装实现「一次定义、多处复用」。
用 @base-font-size 变量统一控制根字号
所有 rem 计算都基于这个基准值，后续只需改它就能全局缩放字体体系。常见取值是 16px（浏览器默认）或 100px（方便设计稿 100px = 1rem 换算）。
-
@base-font-size: 16px;—— 兼容性好，适合 PC 端为主 -
@base-font-size: 100px;—— 适合移动端高清屏适配（配合 JS 动态设置html字号） - 务必在全局变量文件（如
variables.less）顶部定义，避免被覆盖
写一个 .rem() 混入做安全换算
不能依赖 px/rem 除法直接运算（Less 会报单位错误），要用 unit() 剥离单位再计算；同时要支持传入多种单位（px、em、无单位数字），并返回带 rem 的值。
.rem(@size) when (isnumber(@size)) {
font-size: unit(@size / @base-font-size, rem);
}
.rem(@size) when (ispixel(@size)) {
font-size: unit((@size / @base-font-size), rem);
}
.rem(@size) when (ispixel(@size) = false) and (isnumber(@size) = false) {
// fallback for em/%/other — warn or ignore
font-size: @size;
}
用法示例：
.title { .rem(24px); } // → font-size: 1.5rem （当 @base-font-size: 16px）
.desc { .rem(14); } // → font-size: 0.875rem
注意 html 根元素字号必须同步设置
Less 里定义了 @base-font-size，但浏览器不会自动把它设为 html 的 font-size。漏掉这步，所有 rem 都按默认 16px 算，和预期对不上。
- 静态项目：在 CSS 开头加
html { font-size: @base-font-size; } - 动态适配项目：用 JS 设置（例如根据屏幕宽度算出
document.documentElement.style.fontSize），此时 Less 中的@base-font-size仅作编译时参考，建议重命名为@design-base避免混淆 - 如果用了
postcss-pxtorem等工具，Less 层就不该再手动转 rem，二者会冲突
最常被忽略的是混用 JS 动态根字号和 Less 编译期 @base-font-size——它们语义不同，但名字一样就容易误以为等价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
