vue-cli3移动端适配 postcss-px2rem

设置页面根节点的字体大小，然后通过px2rem做转换，这样在写样式的时候，直接使用px就可以，不需要自己计算

安装

npm i postcss-px2rem

项目配置文件中添加cssloader

module.exports = {
    css: {
        loaderOptions: {
            postcss: [
                require("postcss-px2rem")({
                    remUnit: 100    // 换算基数
                })
            ]
        }
    }
}

全局设置根节点字体大小

function setRem() {
    const doc = document.documentElement
    const width = doc.getBoundingClientRect().width || window.innerWidth
    const rem = width / 7.5
    doc.style.fontSize = `${rem}px`
}
window.addEventListener('load', () => {
    setRem()
})
window.addEventListener('resize', () => {
    setRem()
})