vue 手机端H5单位px自动转换成rem

postcss-pxtorem vue 手机端H5单位px自动转换成rem

只需要npm install postcss-pxtorem --save-dev即可，不需要额外install postcss

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue: 10,
            minPixelValue: 0,
            propList: ['*']
        }
    }
}

// rem.js 在main中直接引入

// 设计稿以375px为宽度，而我把页面宽度设计为10rem的情况下

// 这个是设计稿中1rem的大小
// 如果代码中你写的是14px，自动转换后，页面显示1.4rem那么说明，你配置自动转换单位成功了
const baseSize = 10; 

function setRem() {
    // 实际设备页面宽度和设计稿的比值
    const scale = document.documentElement.clientWidth / 375;
    // 计算实际的rem值并赋予给html的font-size
    document.documentElement.style.fontSize = (baseSize * scale) + 'px';
}
setRem();
window.addEventListener('resize', () => {
    setRem();
});