vue移动端rem布局适配

使用 rem 单位进行适配，使用以下两个工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

1、安装工具

npm install postcss-pxtorem lib-flexible

2、新建postcss.config.js，内容配置如下

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,   // 此处75是根据设计稿尺寸750设置，如果设计稿尺寸是375则改为37.5
      propList: ['*'],
    },
  },
};

附录：如果项目中使用了vant组件，并且你的项目的设计稿尺寸不是375，而是750或其他尺寸时，由于vant组件是375尺寸的，所以要在postcss.config.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: ['*'],
    },
  },
};