vue3+vite5+vant4移动端rem适配方案

1.安装2个依赖

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

2.在项目根目录新建一个postcss.config.cjs文件,注意是cjs不是js,不然后面再次运行可能会报错,然后写入如下内容:

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 37.5,// vant是37.5为根节点字体大小
            propList: ['*'],//*表示所有的都要转化为rem
        },
    },
};

3.在main.js中引入插件amfe-flexible

import 'amfe-flexible'

4.在app.vue中给#app设置一个默认字体大小,防止vant组件继承body的字体大小

#app {
  height: 100vh;
  font-size: 28px;
}

5.然后就可以按照375px宽度的设计稿开发页面了