对VUE+vant项目进行 rem适配

Rem 布局适配

Vant 中的样式默认使用 px 作为单位，如果需要使用 rem 单位，推荐使用以下两个工具：

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

1、安装

npm install postcss-pxtorem --save-dev
cnpm install --save lib-flexible

2、引入

在main.js 中引入 import ‘lib-flexible’

3、PostCSS 配置

创建postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8'],
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};