移动端动态通过js设置字体大小

相对单位rem是集相对大小和绝对大小的优点于一身

通过它既可以做到只修改根元素字体大小就成比例地调整页面所有字体大小

又可以避免字体大小逐层复合的连锁反应

// 动态配置rem 
// 默认1rem  10px
function setRem() {
    // 获取屏幕的宽度
    var uiWidth = 375;
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    // 通过js动态改变html根节点字体大小
    var html = document.querySelector('html');
    html.style.fontSize = (clientWidth / uiWidth) * 10 + 'px';
}

window.onresize = setRem;
window.onload = setRem;