移動端 單位 rem

標籤：

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();})();

　　

 

移動端 單位 rem