移动端css样式长度单位rem

建议配置 postcss-pxtorem 和 postcss-px2rem-exclude (排除目录) 和 lib-flexible (设置根字体大小),

以下函数的效果与 lib-flexible 类同, css中使用rem单位;

// 设置 rem 函数
function setRem () {

    // 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    //得到html的Dom元素
    let htmlDom = document.getElementsByTagName('html')[0];
    //设置根元素字体大小
    htmlDom.style.fontSize= htmlWidth/20 + 'px';
}

setRem();// 初始化

// 重新设置 rem
window.onresize = function () {
    setRem()
}

如果是vue项目, 则使用postcss批量转换px至rem, 即CSS中只要写px单位即可