px转rem必须显式除法，即(@val / @base-font-size) * 1rem；unit()函数仅剥离或强加单位，不能用于换算；响应式需在@media中重定义@base-font-size，函数调用自动读取当前作用域值；输入须区分isnumber()和isdimension()类型，避免静默失效；border/shadow/content等属性应保留px以保障渲染效果。
px转rem必须显式除法，不能依赖unit()自动换算
Less的unit()函数不是转换工具，它只做单位剥离或强加——unit(32px, rem)输出32rem，不是2rem。真正可靠的转换逻辑是除法：用设计基准值（如@base-font-size: 16px）做分母，再乘目标单位。(@val / @base-font-size) * 1rem才是可读、可控、可调试的写法。
常见错误包括：
- 写成
(@val / @base-font-size)rem——Less会把它当一个未定义标识符报错 - 传入无单位数字（如
14）却没做类型判断，导致Operation on an invalid type - 把
unit(@val, "")误当成“取数值”，其实它只是抹单位；真正要算，得先除再拼
响应式基准值只能靠媒体查询重定义变量
想让.px2rem(14px)在小屏输出0.875rem、大屏输出0.7rem，不能靠插件或运行时条件，只能利用Less作用域链：在@media块内重新赋值@base-font-size，函数调用时自动读取当前作用域下的值。
关键约束：
-
@base-font-size必须在调用函数前已声明，否则编译直接失败 - 不要新建变量名（如
@base-font-size-md），覆盖原变量才生效 -
when守卫不支持屏幕宽度判断，@media (max-width: 768px)是唯一可行路径
输入类型必须区分处理，否则函数静默失效
传入14和14px在Less里是两种类型：isnumber()对前者返回true，isdimension()对后者返回true。只用unitless()会漏掉带单位输入，只用isdimension()又无法识别纯数字。
健壮写法需双判断：
-
.px2rem(@val) when (isnumber(@val)) { ... }—— 处理14 -
.px2rem(@val) when (isdimension(@val)) and (unit(@val) = px) { ... }—— 处理14px - 漏掉任一判断，函数可能不执行也不报错，最终CSS缺失样式
别试图全局替换px，边框/阴影/伪元素content必须人工甄别
自动把所有px转rem会导致视觉崩坏：border: 1px变成0.0625rem几乎不可见，box-shadow: 0 2px 4px在小屏上过虚、大屏上太实，content: "×"里的数字也不能转。
实际适配应聚焦三类属性：
- 字号：
font-size - 间距：
margin、padding - 容器尺寸：
width、height、max-width
其他一律保留px——这不是偷懒，而是对CSS渲染行为的基本尊重。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
