vue+vant开发之移动端rem适配屏幕方案

vue+vant开发移动端网页适配（rem）

简单介绍一下rem和px的换算关系：1rem=html的font-size。
在项目中，我采用postcss-pxtorem+amfe-flexible，
vant是基于375px的。
安装：
npm i amfe-flexible
npm i postcss-pxtorem -D
amfe-flexible作用
其实这个插件就是一个js脚本，它会监听项目运行环境的屏幕尺寸，然后给html设置一个font-size。
比如：375px的尺寸，它会帮我们给html设置font-size为37.5px。如果换成iphone5，就为32px。
postcss-pxtorem的作用
帮助我们将单位转化为rem，这个需要在项目中做一个配置，设置一个基准值，比如37.5，那么，我们在页面中设置font-size：16px，它会自动计算成rem，16/37.5=0.42667rem。使得font-size:0.42667rem。它不需要安装在运行时依赖环境里面，只需要安装在开发环境依赖里面，因为我们在项目打包之后它已经自动将我们所有的px单位转成rem。最终，我们的项目跑到不同的手机屏幕下，这个font-size都是0.42677rem。而我们rem的换算关系是跟html的font-size挂钩的，也就是说，0.42667html的font-size，比如：0.4266737.5=16px。也就是我们在375px屏幕中想要的字体大小，如果是320px的，字体会随着html的ont-size变化，这样用户看到的内容才是正常的，不然写死尺寸，贼难看。
具体的代码如下：
postcss-pxtorem的使用方法
在项目的根路径新建一个postcss.config.js的文件

module.exports = {
  plugins: {
    autoprefixer: {//配置升级的版本号
      overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,//设置px转换成rem的基准值，为了方便，ui尺寸是375，我们就设置成375，如果是750，就设置成75，但是我们公司给的750，项目配的是37.5，所以在写尺寸的时候ui上所有的都需要/2.
      propList: ['*'],
    },
  },
};

amfe-flexible的使用方法
在项目的入口文件main.js中引入即可

import 'amfe-flexible'