h5在移动端适配 px自动转rem

在项目中为了屏幕适配，经常会用到rem，postcss-px2rem就是为了让我们直接在将代码中px自动转化成对应的rem的一个插件

1. 安装：npm i postcss-px2rem --save -dev

2.根目录下新建postcss.config.js(注：之前使用的 .postcssrc.js 已经被抛弃)

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5
      propList: ['*'], // Use wildcard * to enable all properties
      selectorBlackList: ['.norem'], // ignore and leave as px
	  exclude: /node_modules/ 
    }
  }
};

remUnit: 37.5  代表 1rem = 37.5px;  所以当你一个75px值时，它会自动转成   (75px/37.5)rem, 

转化完之后，你还需要在根元素设置他的font-size,因为rem是相对根元素来设置大小的

html {
    font-size: 10vw;
}

这样的话我们设置的px值  就变成对应的    10%的屏幕宽度 *(75px/75)rem ，当然你也可以根据屏幕宽度来动态配置html的font-size

配置传送门

3.如果你的项目使用vue-cl