Less中无内置rem转换函数，需手动编写.px2rem()等函数实现编译期px转rem，依赖@base-font-size变量和.unit()剥离单位，不可在calc()中直接使用，且需JS动态设置html font-size才能实现响应式效果。
Less里没有内置的 rem 转换函数，得自己写
Less 本身不提供类似 Sass 的 pxtorem() 或自动单位转换能力。你看到的“自动转 rem”效果，几乎全是靠自定义函数或变量计算实现的——不是语法糖，是手动算出来的。关键点在于：所有转换必须在编译期完成，不能依赖运行时 JS。
常见错误是试图用 JavaScript 函数（比如 parseInt()）在 Less 中做动态计算，这会直接报错：ReferenceError: parseInt is not defined。Less 的运算只支持基础四则、颜色操作和字符串拼接，不执行 JS。
- 转换逻辑必须基于已知的根字体大小（如
16px），写死或通过变量控制 - 所有
px值需先除以基准值（如@base-font-size: 16px），再拼上rem - 推荐用函数封装，避免重复写
14px / 16px这类表达式
用 .unit() 和除法实现安全的 px → rem 转换
Less 的 .unit() 函数能剥离单位，配合除法可做数值归一化。但要注意：它不校验单位类型，.unit(14px) 返回 14，而 .unit(14rem) 也返回 14——所以输入必须约定为 px 值。
@base-font-size: 16px;
<p>.px2rem(@px) {
@val: .unit(@px) / .unit(@base-font-size);
@val * 1rem;
}</p><p>.example {
font-size: .px2rem(14px); // 编译后：font-size: 0.875rem;
padding: .px2rem(24px) .px2rem(16px); // 1.5rem 1rem
}</p>
- 必须传带单位的值（如
14px），不能传纯数字14，否则.unit()返回0 - 如果项目需要适配不同根字号（如移动端
html { font-size: 37.5px; }），只需改@base-font-size，无需动函数调用 - 该方案不处理
em、vh等其他单位，也不做边界检查（如负值、0px）
避免在 calc() 里混用 rem 和 px
Less 编译器会在 calc() 内部提前计算表达式，导致本意是 calc(100% - 16px) 却被转成 calc(100% - 1rem)——这会破坏布局。根本原因是 Less 把 16px 当作普通值参与了 .px2rem() 计算。
- 对
calc()中的像素值，显式禁用转换：用字符串拼接绕过编译，例如~"calc(100% - 16px)" - 不要把
.px2rem(16px)直接塞进calc()，Less 会尝试计算并报错（如Cannot parse inline value "1rem"） - 如果必须动态计算，建议提取为变量：
@gap: 16px; width: ~"calc(100% - @{gap})";
响应式场景下 rem 基准不能只靠 Less 控制
Less 只负责编译时生成 CSS，它无法感知屏幕宽度或用户缩放。所谓“根据屏幕宽度调整 rem 基准”，必须靠 JS 动态设置 html 元素的 font-size，例如 document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';。Less 里写的 @base-font-size: 16px 只是告诉编译器“按这个比例算”，实际渲染效果取决于 JS 设置的根字号是否匹配。
- 前后端分离项目中，若 SSR 渲染时 JS 未执行，初始
font-size是浏览器默认值（通常16px），此时 Less 编译出的rem值才真正生效 - 调试时发现 rem 表现异常，优先检查 JS 是否成功设置了
html的font-size，而不是怀疑 Less 函数写错了 - 不要在 Less 中模拟媒体查询做多基准切换（如
@media (max-width: 768px) { @base-font-size: 14px; }），这语法非法且无意义
实际项目里最常被忽略的是：Less 的单位转换和浏览器最终渲染的 rem 行为是两层事——前者决定 CSS 文件里写什么，后者取决于 HTML 根元素那一刻的计算值。没 JS 配合，rem 就只是个静态单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
