rem是相對于根元素的字體大小蹂午。
eg:根元素的字體大小 16px,10rem 將等同于 160px,即 10 x 16 = 160裁眯。
html {
font-size: 16px;
padding: 10rem; // 160px
}
em: 使用em單位的元素的字體大小
eg:如果一個 div 有 18px 字體大小,10em 將等同于 180px讳癌,即 10 × 18 = 180
div{
font-size: 18px;
padding: 10em; // 180px
}
在移動端的web頁中穿稳,使用rem的多。
我用的rem的配置(相當于750px的屏幕寬度晌坤,即我把根元素字體設(shè)置為100px逢艘,比如UI給的圖某個寬度為200px,就可設(shè)置為2rem骤菠。):
setRem();
window.addEventListener('orientationchange', setRem);
window.addEventListener('resize', setRem);
function setRem() {
var html = document.querySelector('html');
var width = html.getBoundingClientRect().width;
html.style.fontSize = width / 7.5 + 'px';
}
貼個鏈接何時使用rem與em