在前端开发中，移动端设备呈现的效果跟电脑端设备不同，基于这个问题，可以使用一些前端技术去解决这个问题，其中之一就是 px2rem。
什么是 px2rem？
在移动端开发中，我们往往会使用像素进行布局，但是不同尺寸的设备像素密度是不同的。在这种情况下，我们使用相同的像素数量并不能在各种设备上保持同样的效果。因此，我们可以使用一个简单的技术将像素转换成缩放比例，以解决这个问题。这个技术就是 px2rem。
px2rem 是一种将像素值转为 rem 逻辑值的技术。rem 是一种相对于根元素 html 字体大小的单位。这个单位经常被用于响应式布局和移动端开发中。
在使用 LESS 编写样式时，将 px 转换为 rem 单位是一个常见需求。我们可以使用 LESS 中的函数进行该项操作。
在 LESS 中，首先定义一个变量，用于存储基础像素比例。例如：
@base-size: 16px; // 定义基础像素比例
接下来，定义一个函数用于将 px 值转换为 rem。该函数使用内置函数 calc() 计算转换后的 rem 值。例如：
.px2rem(@value) {
// 转换 px 为 rem
@{value} / @base-size;
// 带单位字符串
result: ~"calc(#{@{value}} / #{@base-size} * 1rem)";
}搭配上方代码的最终代码样例：
-- -------------------- ---- ------- ----------- ----- --------------- - -- -- -- - --- -------- - ----------- -- ------ ------- ------------------ - ------------- - ------- - ----- - ---------- ------------ ------- ----------- ---- ------------ -
在上面的示例中，我们定义了一个 .px2rem() 函数，该函数接受一个值并返回一个带单位字符串 calc()。在样式中使用该函数，将值以像素为单位传递给函数，然后调用返回的结果。
结论
现在，我们已经学会了如何在 LESS 中使用 px2rem 技术。这项技术可以提高移动端开发体验。通过函数的形式我们可以灵活使用，再加上适当的 CSS 样式兼容处理，移动端适配工作将会事半功倍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b3e85d91dce0dc888b85f