Vue2使用potcss-pxtorem

引用的版本 "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中引入

实现效果

标签：potcss,js,fontSize,Vue2,setFontSize,const,postcss,pxtorem
来源： https://blog.csdn.net/ljq869115191/article/details/122343494