VUE3使用rem适配

话不多说直接上实践

1. 安装rem布局包 在这里插入代码片

cnpm i amfe-flexible -S
cnpm i postcss postcss-pxtorem -D

2. 在main.js引入

import 'amfe-flexible'

3. 与src同级目录创建postcss.config.js

rootValue是设计稿大小除以10，rootValue 75.0的值其实就是代表ui设计稿的750px的像素，引用的时候css直接写宽750px就相当于100％，它会自动根据屏幕进行计算成rem，无需对原测量值进行REM的换算（这里推荐37.5，结合2x的设计图开发，因为vant的组件你会发现37.5更为适合）。

/* 需要依赖：lib-flexible、postcss-pxtorem */
module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-pxtorem": {
            rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
            propList: ["*"],
        },
    },
};

4. vue.config.js

vue.config.js无需引用任何内容，如需按设计稿走，只需在postcss.config.js中修改rootValue即可

5. 在chrome调试者工具中审查元素查看有无生效

可以看到已经生效

6. 如果你不想转换成rem，就把px的单位大写PX，就可以啦。