一、需要下载这两个依赖
npm install amfe-flexible@2.2.1 -D
npm install postcss-pxtorem@6.0.0 -D / npm install postcss-pxtorem@5.1.1 -D
二、在vite.config.ts中
引入 import postCssPxToRem from "postcss-pxtorem";
并写
css: {
// 此代码为适配移动端px2rem
postcss: {
plugins: [
postCssPxToRem({
rootValue: 37.5, // 1rem的大小(控制1rem的大小 点位:px)
propList: ["*"], // 需要转换的属性,这里选择全部都进行转换
}),
],
},
},
三、main.ts中写入
// rem
import "amfe-flexible";// rem
const baseSize = 38;// 设置 rem 函数
function setRem() {
// 当前页面宽度缩放比例,可根据自己需要修改
const scale = document.documentElement.clientWidth / 1920;
// 设置页面根节点字体大小
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}// 初始化 rem
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem();
};