Rem通常用来做自适应布局，即在不同尺寸的手机上，如IPhone5/6/7/8/9/Plus等等，可以让字体或者其他元素随着手机屏幕其实就是html字体根节点的变化啦的改变而不断发生变化，以至于达到自适应的目的。
而在我们的常见的Vant组件官网中，也有对Rem适配的教程，但是本人搞了好久才搞明白其原理，借此记录，以备查阅。
VantRem适配文章来源：进阶用法 - Vant 4 (gitee.io)
lib-flexible插件
首先我们要使用该插件，该插件的目的是把屏幕分为10等份，也就是设置html根元素为屏幕宽度的1/10，当切换不同的屏幕时，始终保证屏幕的html根元素的font-size是屏幕宽度的1/10
比如屏幕宽度是375px，当我们分成了十等分之后，每一份就是37.5px，即1rem=37.5px，如果你写一个div盒子，宽度设置为2rem，那么盒子宽度就是75px，如果设置10rem，那就是屏幕宽度【375px】
为什么要这么做呢，我们接着往下看
postcss-pxtorem插件
第二步安装该插件，该插件的目的是把px转换成rem，为什么要转成rem呢？正如我们上面所说，如果你想做成自适应的布局，那么肯定不能写死px，要用比例的概念来写，我如果把一个屏幕分成十等分，不管你这个屏幕尺寸是375px还是414px，我写一个div盒子是5rem，那么就永远占据屏幕的一半啦！
js
// postcss.config.js
module.exports = {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
},
};rootValue到底是什么
这里的rootValue到底是什么呢？rootValue和上方第一个插件把html根元素设置成1/10一点关系也没有哦!!
1）若你的设计稿宽度是375px，那么在第一个插件的作用下，会把屏幕分成十等份，即会把你的根节点字体大小设置为37.5px，此时1rem=37.5px
2）此时如果你的rootValue设置为37.5px，那么当你有一个盒子，宽度为375px时，那么此时盒子的真正宽度计算如下 
换言之，rootvalue是来计算你是几rem，换算之后，再拿你的rem乘以根节点的字体大小，就是最后的字体大小
比如上面的案例，你的盒子是375px，换算后是10rem，此时当你把手机屏幕改成414px，根节点就是41.4px，那此时盒子的宽度就是10rem*41.4px=414px，最后仍然会铺满整个屏幕，这就是自适应
为什么rootValue有时候是375，有时候是750
目的是为了能按照设计稿的尺寸来写1：1写css字体大小
由于Vant组件是按照375px设置的，那就和我上面说的案例一样，需要把rootValue设置成37.5px，当你的设计稿宽度如果是750px时，如果你的rootValue仍然设置37.5px的话会发生什么呢，这样你在写尺寸的时候，就不能按照设计稿来1：1的写尺寸了
举例：
我们以IPhone6举例，即屏幕宽度是375px，根节点大小是37.5px
比如你设计稿上的一个盒子尺寸是20px，但是由于设计稿是二倍图，所以最后真正的尺寸是10px
但是如果你在css里写20px，字体尺寸=20px/37.5px*37.5px=20px，这样就不对了是吧，你扩大了二倍，所以你在css里写10px才是对的，也就是你要手动把设计稿里的尺寸都除以二
那如果此时你的rootValue设置成75px，字体尺寸=20px/75px*37.5px=10px，此时就是我们想要的大小，因此这时就可以随心所欲的来根据设计稿写尺寸拉
那如果你的设计稿是828px，你知道rootValue设置成多少吗？
没错，既然是828px，除以二就是414px，其实对应的就是IPhone XR型号，因此我们要按照此手机来设计，所以我们的rootValue要设置成82.8px，也就是把我们的设计稿分成10份即可，因为你永远记住一个公式即可
