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">