Less中REM单位换算技巧与BaseSize设置

在 Less 中直接硬写 `font-size: 1.6rem` 表面简洁，实则埋下维护隐患：rem 依赖根元素字号，而浏览器默认值不可控、多端适配难、设计稿换算易出错；真正高效可靠的方案是用 `@base-font-size` 变量统一基准（如 16px 或便于计算的 100px），配合健壮的 `.rem()` 混入函数——它通过 `unit()` 安全剥离单位、兼容 px/无单位输入，并自动按基准换算为 rem，同时必须同步设置 HTML 根元素字体大小（静态用 CSS、动态用 JS），否则所有 rem 计算都将失效；尤其要注意区分编译期变量与运行时动态根字号的语义差异，避免与 postcss-pxtorem 等工具冲突——掌握这套机制，才能让 rem 真正成为可维护、可扩展、响应式友好的字体管理利器。

为什么直接写 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——它们语义不同，但名字一样就容易误以为等价。

以上就是《Less中REM单位换算技巧与BaseSize设置》的详细内容，更多关于的资料请关注golang学习网公众号！