vue3-vite使用amfe-flexible

1. 安装postcss-pxtorem

npm install postcss-pxtorem --save-dev

2. 安装lib-flexible

npm i -s  amfe-flexible

3. 在main.js引入插件

import 'amfe-flexible'

4. 配置postcss.config.js文件

在根目录,和package.json同级,创建一个名为postcss.config.js的文件。

module.exports = {
 "plugins": {
    "postcss-pxtorem": {
      rootValue: 37.5, // Vant 官方根字体大小是 37.5(根据使用的ui组件?定义根元素大小?
      propList: ['*'],
      selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class,不进行rem转换
    }
  }
}

在index.html头部加入手机端自适应meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">