移动端适配（rem）

1. postcss-pxtorem

该插件可以将项目中的px值转化为rem，注意：行内样式不会转化

npm install postcss-pxtorem  -D

在项目根目录创建文件 .postcssrc.js 或 postcss.config.js

// postcss.config.js
module.exports = {
        plugins: {  // 用到的插件都配置在这里
          'postcss-pxtorem': {
              rootValue: 37.5, // 1rem = 37.5px rem基准值  750设计稿就改为 75
              propList: ['*'],  // 配置要转换的css属性  * 表示所有属性
           },
        },
     };
module.exports = {
      plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
           'postcss-pxtorem': {
                 rootValue({ file }) {  // Vant中是根据375来写 如果我们的不是，就需要使用 函数的形式做判断
                  return file.indexOf('vant') !== -1 ? 37.5 : 75;
               },
               propList: ['*'],
            },
         },
     };

2. lib-flexible

该插件可以根据屏幕动态的设置html的font-size大小
默认会将屏幕分成十份，然后给html的font-size， 比如屏幕宽度 750px 那么html的font-size就是 75px
1rem = 75px

npm install lib-flexible

// 在main.js中导入
import 'amfe-flexible'