下载插件 postcss-pxtorem

npm install postcss-pxtorem -D

在 vite.config.ts 中配置

const postCssPxToRem = require("postcss-pxtorem");export default defineConfig({css: {postcss: {plugins: [postCssPxToRem({// 换算基数，rootValue: 16,//允许REM单位增长到的十进制数字,小数点后保留的位数unitPrecision: 5,propList: ['*'],//默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值exclude: /(node_module)/,//（布尔值）允许在媒体查询中转换px。mediaQuery: false,//要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他selectorBlackList: ['.van'],//设置要替换的最小像素值minPixelValue: 1,}),],},}
})

根据设计稿编写自适应脚本

/******** src/utils/rem.js ********/const baseSize = 16;
// 设置 rem 函数function setRem() {// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。const scale = document.documentElement.clientWidth / 704;// 设置页面根节点字体大小document.documentElement.style.fontSize =baseSize * Math.min(scale, 2) + 'px';
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem();
};

在 .vue 文件中引入 rem.js 文件

import '@/utils/rem.js'

在浏览器控制台中查看是否转换成功