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的配置（相當(dāng)于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