less中需自定义.px2rem()混合实现px转rem，依赖@base-font-size基准值（如75），通过unit(@px/@base-font-size, rem)计算；不可全局替换px，须人工甄别字号、间距等响应式属性；ios safari需避免html font-size过小，可调大基准或加js下限；推荐用postcss-pxtorem替代，支持白名单与动态rootvalue。
Less里怎么把px自动转成rem？
不能靠Less内置函数直接转换，必须自己写混合（mixin）或用插件。Less本身不感知设备像素比或根字体大小，px到rem的换算依赖两个外部变量：设计稿基准（比如 1rem = 75px）、以及最终运行时html元素的font-size值。Less只负责编译期计算，所以你得明确告诉它“1px等于多少rem”。
常见做法是定义一个基准值变量，再封装一个.px2rem()混合：
@base-font-size: 75; // 设计稿宽度为750px时，1rem = 75px → 即 100vw = 750px → 1rem = 10vw
.px2rem(@prop, @px) {
@{prop}: unit(@px / @base-font-size, rem);
}
// 使用
.example {
.px2rem(width, 150); // → width: 2rem;
.px2rem(font-size, 32); // → font-size: 0.42666666rem;
}
为什么直接替换所有px会出错？
不是所有px都该转rem。边框、阴影、背景尺寸、伪元素content里的数字，甚至某些UI库内部硬编码的px，强行转会导致视觉异常或失效。
-
border: 1px solid #ccc→ 转成border: 0.0133rem后几乎不可见 -
box-shadow: 0 2px 4px rgba(0,0,0,.1)→2px和4px转rem后在小屏上过虚，在大屏上又太实 -
background-size: 20px 20px→ 图标尺寸失真
所以必须人工甄别，只对字号、间距、宽高这类响应式敏感属性做转换。
如何避免rem在iOS Safari里字体变小？
iOS Safari有个老问题：当html的font-size设得过小（比如10px），系统会强制放大文本，破坏布局。这不是Less的问题，但和你的转换逻辑强相关——如果你按750px设计稿设@base-font-size: 75，那在375px宽的iPhone上，html需设font-size: 10px（375 / 75），刚好踩中阈值。
解决方案是调整基准或加保护：
- 改用
@base-font-size: 100（即1rem = 100px），这样375px屏对应font-size: 37.5px，避开iOS最小字号限制 - 用JS动态设置
html字体大小时，加下限：Math.max(12, clientWidth / 10) - Less里可加判断：
.px2rem(@prop, @px) when (@px > 12) { ... }，忽略小尺寸值
要不要用postcss-pxtorem代替Less转换？
要。Less层转换本质是“静态预估”，而postcss-pxtorem在CSS打包后统一处理，支持白名单（selector或prop过滤）、忽略特定值（如1px）、甚至保留原始px注释。更重要的是，它不侵入源码逻辑，设计师给的px值你照写就行，无需改写成.px2rem()调用。
典型配置：
// postcss.config.js
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // 375px屏下1rem=37.5px
propList: ['font*', 'padding*', 'margin*', 'width', 'height'],
exclude: /(node_modules|lib)/
}
}
}
复杂点在于：你得确保JS同步设置html字体大小，且和PostCSS的rootValue匹配；否则rem换算和实际渲染对不上。这个环节漏掉，所有转换都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
