移动端rem自适应

之前设计图给的是640px的二倍图,所以将html的font-size设置为40px,现在改成750px的二倍图了,稍微做了修改:(40px这个是我个人的习惯,因为40px贼JB好算,如果你喜欢设置成213px也可以,反正随时备好计算器惹。)

html{ font-size: 40px;} 
.test{ font-size: 1.5rem;} // 将.test的字体大小设置为60px => 60px除以根元素font-size大小40px => 60/40=1.5rem
/**
 * @Description: 640px二倍图rem自适应
 */
function setRem(){
    var b = document.documentElement,
        a = function() {
            var a = b.getBoundingClientRect().width;
            b.style.fontSize = 0.0625 * (640 <= a ? 640 : a) + "px"; // 40/640 = 0.0625
        },
        c = null;
    window.addEventListener("resize",function() {
        clearTimeout(c);
        c = setTimeout(a, 100);
    });
    a();
}
/**
 * @Description: 750px二倍图rem自适应
 */
function setRem(){
    var b = document.documentElement,
        a = function() {
            var a = b.getBoundingClientRect().width;
            b.style.fontSize = 0.053333333333 * (750 <= a ? 750 : a) + "px"; // 40/750 = 0.053333333333
        },
        c = null;
    window.addEventListener("resize",function() {
        clearTimeout(c);
        c = setTimeout(a, 100);
    });
    a();
}

猜你喜欢

发表评论

最新发布