Vue + Vant 配置移动端项目rem布局

问题:使用Vue + Vant 创建移动端项目配置rem布局自适应 移动端不经常写,时间久了就忘记怎么配置了,在这里记录一下,方便以后查询

根据Vant官网指示进行配置,

1.安装:

npm i -S amfe-flexible
npm install postcss postcss-pxtorem --save-dev
复制代码

2.在main.js中引入

import "amfe-flexible"
复制代码

3.在postcss.config.js文件下进行配置

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

复制代码

4.预期结果

达到图片中的效果就配置成功了,这是设置