vue实现移动端自适应适配

1. 安装lib-flexible

npm i lib-flexible --save

2. 在main.js引入lib-flexible

import 'lib-flexible/flexible'

3. 安装postcss-pxtorem

npm install postcss-pxtorem -D

4. 配置postcss-pxtorem 在根目录修改配置文件，vue2.x是.postcssrc.js，vue3.x是postcss.config.js,此文件自动生成，若没有，手动添加

module.exports = {
  "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5, 表示375设计稿
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换
    }
  }
}

5. 对于引入vant组件的特殊处理

vant设计稿为375，当以750设计稿为基础设置时，需要屏蔽vant

`在postcss-pxtorem对象中添加
selectorBlackList: ['van']

6. 忽略文件

在postcss-pxtorem对象中添加
exclude: /web/i     //忽略 web下所有文件