PostCss PxToRem 前端项目微适配，css自动转换rem

安装postcss-pxtorem

"postcss-pxtorem": "^6.0.0",

设定根节点基准

根目录新建 .postcssrc.js

module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 32,
            propList: ['*']
        }
    }
}

main.js 手动调用函数

export const setupPostCss = (): void => {
    // 基准大小
    const baseSize: number = 16
    // 设置 rem 函数
    function setRem(): void {
        const scale: number = document.documentElement.clientWidth / 750
        // 设置页面根节点字体大小
        let size = (baseSize * Math.min(scale, 2)) < 25 ? 25 : (baseSize * Math.min(scale, 2))
        document.documentElement.style.fontSize = size + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = () => {
        setRem()
    }
}