rem是指相对于根元素的字体大小的单位(相对单位)
rem和em的区别,em相对于父元素的字体大小的单位。rem相对于根元素html字体大小计算,
px是一个绝对的单位。
所以rem可以实现强大的屏幕适配布局
例如:
html{
font-size:20px;
}
.btn{
width:6rem;
height:3rem;
}
//<div class=‘btn‘></btn>那么.btn的宽度为120px;高度为60px;
所以在做移动端适配的时候就要根据不同分辨率设置font-size的值,做法:rem.js文件:
(function () {
var html = document.documentElement;
function onWindowResize() {
html.style.fontSize = html.getBoundingClientRect().width / 20 + ‘px‘;
}
window.addEventListener(‘resize‘, onWindowResize);
onWindowResize();
})();