rem单位是指相对于根元素的字体大小的单位,也就是比如我定义:
html{ font-size:14px}
那么如引用.test-box font-size/width/height 设为2rem的话就相当于 2*14px。也就是
.test-box{
font-size:2rem;
/*font-size:28px; 即:2倍的根元素字体大小*/
}
那么,所有的网页元素,只要css单位采用的是rem,即可根据html根元素字体大小进行动态改变。 只要根据屏幕宽度设置html元素的font-size即可。
<!--初始化rem-->
! function(a) {
function b() {
var b = a.document,
c = b.documentElement,
d = c.getBoundingClientRect().width;
document.documentElement.style.fontSize = 20 * (d / 360) + "px"
}
window.addEventListener("DOMContentLoaded", function() {
b()
}, !1), window.addEventListener("resize", function() {
b()
}), b()
}(window);