引用的版本 "postcss-pxtorem": "^5.1.1"
根目录添加 postcss.config.js 文件
文件内容
module.exports = {
plugins: {
"postcss-pxtorem": {
rootValue: 32, //根目录fontsize值
propList: ["*"],//需要转换的 * 全部 更多参数看文档 https://www.npmjs.com/package/postcss-pxtorem 滑动到options这一项
}
}
}
rem.js 文件
setFontSize();
export function setFontSize() {
const baseSize = 32;//基础大小
const scale = document.documentElement.clientWidth / 1920;//缩放大小
const fontSize = Math.max(scale * baseSize, 16);//最小缩放值不得小于16
document.documentElement.style.fontSize = fontSize + "px";
}
window.addEventListener("resize", () => {
setFontSize();
});
在 main.js中引入
实现效果