Less中需用unit()剥离单位后除以基准字号再乘1rem实现px转rem，推荐用支持多参数的mixin而非函数，并注意border-width、line-height、伪元素等易漏场景。
Less里怎么写一个px转rem的自定义函数
Less本身不内置px转rem的函数，但可以用.unit()配合变量和除法手动实现——核心是把像素值除以根元素字体大小（通常是16px），再拼上rem单位。不能直接用px字面量参与运算，必须先用unit()剥离单位，否则会报错Operation on an invalid type。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义基准值：
@base-font-size: 16px;（推荐设为变量，方便后续统一调整） - 写函数：
.px2rem(@px) { @val: unit(@px, px) / unit(@base-font-size, px); @val * 1rem; } - 调用时传入带单位的值：
.px2rem(32px)→ 输出2rem；传32（无单位）会出错 - 注意：Less 4.0+ 支持
unit()，旧版本需改用replace()字符串处理，但不可靠，不推荐
为什么用混合器（mixin）比函数更适合px转rem
函数返回值只能用于属性值上下文，而混合器能直接展开为完整声明，更贴合日常写CSS的习惯。比如你希望.btn { font-size: 14px; padding: 8px 16px; }一键转rem，用混合器可以避免重复写font-size:等前缀。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础混合器写法：
.px2rem-font(@size) { font-size: (unit(@size, px) / unit(@base-font-size, px)) * 1rem; } - 支持多参数的增强版：
.px2rem(@font: false, @padding: false, @margin: false) when (@font) { font-size: (unit(@font, px) / unit(@base-font-size, px)) * 1rem; } .px2rem(@font: false, @padding: false, @margin: false) when (@padding) { padding: (unit(@padding, px) / unit(@base-font-size, px)) * 1rem; } - 调用：
.px2rem(@font: 14px, @padding: 8px);，比函数调用更直观 - 坑点：Less不支持运行时动态键名（如
@{prop}），所以没法写一个通用.px2rem(padding, 8px)式混合器
实际项目中rem转换容易漏掉的三类场景
很多人只转font-size和padding，但这些地方同样需要按比例缩放，否则响应式会错乱。
必须检查并转换的：
-
border-width：比如border: 1px solid #ccc，1px在高清屏下太细，应转为0.0625rem（假设16px基准） -
line-height：虽然常写无单位值（如1.5），但如果写了line-height: 24px，就必须转 - 伪元素尺寸：
::before { width: 20px; height: 20px; }这类固定像素图形，在rem方案里也要同步缩放，否则和文字比例失配
额外提醒：如果用了viewport缩放或JS动态设置html字体大小，确保Less编译时@base-font-size和运行时一致，否则预设值会偏移。
要不要用PostCSS插件替代Less函数
如果项目已接入PostCSS，postcss-pxtorem比Less层转换更可靠——它在CSS生成后、打包前统一处理，不依赖开发者每次手动调用，也不会漏掉内联样式或第三方库的px值。
适用判断：
- 选Less函数：项目小、无构建流程、或需要部分保留px（如1px边框）
- 选PostCSS：中大型项目、用Webpack/Vite、需覆盖所有CSS来源（包括node_modules）
- 混用风险：Less里用
.px2rem(1px)输出0.0625rem，再被postcss-pxtorem二次转换，结果变成0.00390625rem，几乎不可见
真正麻烦的不是写函数，而是维护一致性：设计稿标的是px，开发要记住哪些该转、哪些不该转、基准值有没有改过、不同终端是否用了不同根字号——这些都得靠规范和工具链对齐，光靠Less一行代码解决不了。
