在使用px2rem-loader给你的项目适配的时候remUni

我是在两年前做vue+vant移动端适配的时候用的这个方案lib-flexible + px2rem-loader。

px2rem-loader可以把我们自己写的样式和vant中的css元素px转成rem，结合lib-flexible 以此保证在不同移动端分辨率下vant的组件和我们自己写的样式的适配。

38F9641B.gif

之前我参考的哪些网站找到的这个解决方案我忘记了，对不住那些大佬了

38FB73C1.jpg
这里我找了几篇差不多的，实现方案就是这样：
https://blog.csdn.net/yusun1234/article/details/120349585
https://blog.csdn.net/weixin_40970987/article/details/107088368

虽然最终效果是实现了，也是这样配置的，但其实一直是有疑惑的。正好最近有做适配，抽空把我之前的遇到的问题重新梳理下。

一、为什么要和lib-flexible结合使用，是一定要结合？用自己的rem.js行不行？

我没看过px2rem-loader的源码，但是看过lib-flexible的源码，核心也是动态设置根节点font-size（考虑了设备像素比），那么我们引入自己手写的rem.js是不是也行？答案是可以的。

lib-flexible中的源码，这里的版本是修改了源码后的，为了适配pc

image.png
我们的rem.js
image.png

二、我们设置的根节点font-size和lib-flexible中设置的不一样，那么px2rem-loader中remUnit应该设置多少？

答案是remUnit应该设置为项目中html根节点的font-size。
我们在其他教程上经常看到这样的描述：

image.png
并不是说按照这样设置是错误的，这里没错的原因是结合了lib-flexible，且lib-flexible内部设置的根节点font-size是width/10。
如这个例子，假设页面宽度现在是1920，lib-flexible计算的根节点font-size为192正好和这里配置的remUnit:192匹配。

三、为什么remUnit应该设置为项目中html根节点的font-size？

首先px2rem-loader的作用是在编译的时候将css文件中px部分除以配置的remUnit并将px改成rem，这和我们在手写rem.js后手动将css元素px换算成rem的过程一致，因此remUnit应该设置为项目中html根节点的font-size。下面我们验证下：

现有如下场景：设计稿宽度1920，设计稿中有个盒子，该盒子宽度20px

px2rem-loader + lib-flexible方案有如下过程：
remUnit设置为192，1920分辨率下，lib-flexible中根节点html font-size为1920/10= 192px。则编译后盒子宽度为：20/192 = 0.10416666666666667 rem。
在1920屏幕宽度下，该盒子实际表现的宽度为192px*0.10416666666666667 rem = 20px，其中192px是根节点font-size，换算正确。

px2rem-loader + 自定义rem.js方案有如下过程：
remUnit`设置为100，1920分辨率下，rem.js中根节点html font-size设置为100px【实际开发中，这样是为了好换算，没有设置10px是因为谷歌浏览器最小12px】。则编译后盒子宽度为20/100 = 0.2 rem。在1920屏幕宽度下，该盒子实际表现的宽度为100px*0.2 rem = 20px，其中100px是根节点font-size，换算正确。

以上说明，remUnit应该设置为项目中html根节点的font-size，实际上px2rem-loader是简化我们自己除以自己设定的根节点font-size的过程，以前没有这个loader的时候都是自己手动计算的。

总结：在使用px2rem-loader给你的项目适配的时候remUnit应该设置为项目中html根节点的font-size，虽然也可以使用自己写的rem.js，但还是推荐搭配使用lib-flexible。
lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，在计算根节点font-size的时候也考虑了设备像素比。若要同时适配pc需要更改lib-flexible源码。

若对你有帮助，请点个赞吧，谢谢支持！
本文地址：https://www.jianshu.com/p/f018f2526181，转载请注明出处，谢谢。

参考：
https://www.jianshu.com/p/c35ff10049b7
https://www.jianshu.com/p/79be33f2ce88