在Less中如何强制转换CSS单位以适配不同的移动端方案？

Less不支持运行时单位转换，需用unit()剥离单位、变量控制基准值、手动拼接目标单位三者结合；32px/16得2px而非2rem，32px/16px得无单位2；px2rem()须判断输入类型，@base-font-size须全局定义且编译期生效。

Less 本身不支持运行时单位转换，所谓“强制转换”其实是用 unit() 剥离单位 + 变量控制基准值 + 手动拼接目标单位，三者缺一不可。硬写 32px / 16 得到的是 2px，不是 2rem，直接用会报错或生成非法值。

为什么 32px / 16px 不能直接当 rem 用

Less 除法保留左侧单位，32px / 16px 结果是 2（无单位），但 32px / 16 结果是 2px——它不会自动变成 2rem。常见错误是写成 font-size: 32px / 16px * 1rem，结果是 2px * 1rem → 2pxrem，浏览器直接忽略该声明。

• unit(32px / 16, '') 得到纯数字 2，再手动拼 2 + rem
• unit(32px, 'px') / 16 更安全，明确提取数值
• 永远别依赖隐式单位合并，Less 不保证 2 * 1rem 合并为 2rem（某些版本会出 2remrem）

.px2rem() 函数必须区分输入类型

设计师给的标注可能是 24、24px 或 2.4em，函数得分别处理，否则 unit(24, 'px') 返回 24px，不是想要的 24。

• 用 isnumber(@val) 判断是否为纯数字（如 24）
• 用 isdimension(@val) + unit(@val) = px 判断是否为 24px
• 对 2.4em 这类非 px 单位，建议 fallback 直接透传，不强行转 rem
• 漏掉类型判断，传 24px 进 unit(24px, '') 会报 Operation on an invalid type

基准值 @base-font-size 必须全局定义且可覆盖

这个变量不是用来设置 HTML 的 font-size，而是 Less 编译时做换算的标尺。它必须出现在所有调用 .px2rem() 的文件之前，且不能在 @media 块里重定义——Less 编译期不执行媒体查询。

立即学习“前端免费学习笔记（深入）”；

• 推荐在 variables.less 顶部写：@base-font-size: 37.5px;（对应 750px 设计稿 ÷ 10）
• 构建时可用 Webpack DefinePlugin 注入不同值，生成 H5 / 小程序两套 CSS
• 千万别写成 @base-font-size: 16px; 然后靠 JS 动态改——JS 改的是 DOM，Less 已编译完，两者完全脱钩
• 如果用了 postcss-pxtorem，就别在 Less 层再写 .px2rem()，否则 px 被转两次

最易被忽略的一点：Less 里所有单位运算都发生在编译期，和屏幕宽度、DPR、横竖屏毫无关系。所谓“适配”，本质是人把多套预设值（比如 @base-font-size: 37.5px 和 @base-font-size: 100px）提前编译成不同 CSS 文件，再由 JS 或构建流程决定加载哪一套。指望 Less 自己响应 viewport 变化，就像让 Excel 表格自动调用摄像头——它没这能力。