vue项目——px自动转换rem——自动设置根节点font-size

postcss-pxtorem

• 说明：自动把px单位转化为rem单位
• 用法：

1. postcss.config.js里配置内容

module.exports = {
     
    plugins: {
     
        "autoprefixer": {
     
            overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
        },
        "postcss-pxtorem": {
      
            "rootValue": 16,	// 这里设置转换rem的倍数，假设需要设置的宽度为60px，那么转换后就是60/16=3.75rem
            "propList": ["*"]
        }
    }
}

2. 新建一个js文件，名字随便自己取，我的叫rem.js

// 此处的16跟上面的16对应，同样是倍数
const baseSize = 16
// 设置根节点的font-size大小函数
function setRem () {
     
    // 375为设计稿页面宽度，如为750，把375改为750
    const scale = document.documentElement.clientWidth / 375
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置根节点的font-size大小
window.onresize = function () {
     
    setRem()
}

3. 最后把rem.js引入到main.js中，在写样式中就可直接用px单位，按设计稿的大小来设置了。