移动端 单位 rem

Posted 2020-08-04 Y_WEB

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的值,做法：

(function () {
    var html = document.documentElement;

    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + ‘px‘;
    }
    window.addEventListener(‘resize‘, onWindowResize);
    onWindowResize();
})();