1.什麼是REM
先來認識幾個常見單位：
- px：像素，這個大家都知道。
- vh：viewport height，視窗高度，是指佔整個瀏覽視窗高度的百分數。
- vw：viewport width，視窗寬度，是指佔整個瀏覽視窗寬度的百分數。
- em：一個大寫字母M的寬度（有時候也說一個漢字的寬度，但其實是錯的），多少em是指大寫字母M的寬度的倍數
而rem（Root em） ，理解過來是指根元素（<html>標籤）中的font-size，雖然rem中有em但是這裏兩個單位沒有任何關係，這裏需要特別注意。
舉個例子，chrome默認字體大小爲16px，如果不設置html{font-size:XXpx},所以在這時1rem就是16px，
2.REM和EM的區別
首先兩者什麼關係都沒有！
em是指自身的font-size的倍數，這裏舉個例子
html {
font-size:16px;
｝
p {
font-size:12px;
height:2em; /*2 x 12 = 24px*/
width:2rem; /*2 x 16 = 32px*/
}
3.手機端方案的特點
由於分辨率不統一，不同品牌不同設備的屏幕顯示比例不同，移動端開發需要做適配的話只能使用等比例放大縮小來進行（這裏不考慮響應式，只是在接近的分辨率中進行比較）。
4.使用JS動態調整REM
如果想通過縮放來顯示內容，就必須與顯示的寬度（innerWidth）有關係。但是像上面的說的，這幾個單位除了vw之外都和顯示寬度沒有關係。然而，vd目前瀏覽器兼容性很差，別說手機，就是電腦瀏覽器都有些不兼容。因此，就有人想出使用JS來獲取顯示寬度進行設 置。只需要在html頁面中，加載css文件之前添加以下代碼
<script>
document.write(`<style>html{font-size:${document.innerWidth}px;}</style>)；
</script>
在此之後可以利用1rem=innerWidth來進行佈局，這個時候1rem=100vd。如果覺得小數太小了寫着不方便也可以取font-size==｛doucment.innerWidth/10｝,注意，這裏不要用100的，因爲有的瀏覽器會設置最小字體，比如chrome瀏覽器默認最小爲12px，當設置小於這個值的時候會不生效
5.REM與其他單位同時存在
當使用rem的時候不影響其他的單位使用，有時候考慮到以rem爲單位的換算成px可能不到一像素，這個時候還是使用px爲單位。