less不支持单位转换插件，unit()仅操作单位而不换算，可靠方式是显式除法定义.px2rem函数，并通过媒体查询重定义@base-font-size变量实现响应式。
Less插件不参与单位转换，编译期逻辑必须手写
Less本身没有“单位转换插件”这个概念。所谓插件（比如less-plugin-autoprefix或less-plugin-clean-css）只在编译阶段做后处理，比如加前缀、压缩，**完全不碰数值运算或单位改写**。你没法装个插件就让16px自动变成1rem——这得靠你自己定义变量、函数或混合器。
常见误解是把构建工具（如Webpack的less-loader）或编辑器插件（如VS Code的Easy Less）当成“单位转换插件”。它们只是触发编译，不改变Less语法行为。
- Easy Less：保存
.less时自动生成.css，但不会修改你的代码逻辑 -
less-loader：可传入plugins选项，但官方插件列表里没有一个支持单位重写 - 试图用
less-plugin-px2rem这类第三方包？它早已废弃，且依赖PostCSS流程，不是Less原生能力
unit()不是转换函数，而是单位操作工具
unit()常被误认为“px转rem函数”，但它实际只做两件事：剥离单位（unit(16px, "") → 16），或重设单位（unit(16, rem) → 16rem）。它**不执行换算逻辑**。
比如unit(32px, rem)结果是2rem，是因为Less内部默认按16px = 1rem换算，但这属于隐式规则，不可控、不可配置。真正可靠的写法是显式除法：
.px2rem(@val) {
font-size: (@val / @base-font-size) * 1rem;
}
-
@base-font-size必须是带单位的变量（如@base-font-size: 16px），否则@val / @base-font-size会报Operation on an invalid type - 传入
32px没问题；传入32（无单位）会直接失败，因为32 / 16px类型不匹配 - 别写
(@val / @base-font-size)rem——Less会把它当做一个标识符，编译报错
响应式基准值必须靠媒体查询重定义变量
想让.px2rem(14px)在移动端输出0.875rem、在PC端输出0.7rem，不能靠插件切换，只能靠Less作用域链：在@media块内重新赋值@base-font-size，函数会自动读取当前作用域下的值。
错误做法：在函数里写when (max-width ——Less不支持运行时条件判断，<code>when只用于mixin守卫，且无法读取屏幕宽度。
- 正确结构：
@base-font-size: 16px;放在全局；@media (max-width: 768px) { @base-font-size: 14px; .box { .px2rem(14px); } } - 确保
@base-font-size在调用函数前已声明，否则编译时报variable @base-font-size is undefined - HTML根字体若用JS动态设置（如
document.documentElement.style.fontSize = '18.75px'），Less算出的rem值会失准——这是运行时与编译期的根本割裂
伪元素、border、line-height这些地方最容易漏转
很多人只给font-size和padding套.px2rem()，但::before的width、border的1px、line-height: 24px同样需要同比例缩放，否则高清屏下线条过细、图标变形、行高错位。
- 统一用混合器覆盖：
.px2rem(@font: false, @padding: false, @border: false)，避免漏写 -
border: 1px solid #ccc要拆成border-width: .px2rem(1px)，不能只转border属性整体 -
line-height若写24px必须转；若写无单位值（如1.5）则无需处理——rem方案只影响绝对尺寸 - CSS变量（
var(--size)）无法参与Less运算，只能用@base变量做换算，CSS变量仅存纯数字作运行时入口
单位转换的本质不是语法糖，而是编译期对设计稿像素值的确定性映射。一旦脱离@base-font-size这个锚点，所有rem值都会失去意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
