之前设计图给的是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();
}