CSS字型單位em和rem的區別
css為我們提供了非常多的尺寸單位，字型經常使用的單位包括以下幾種：
單位那麼多我們如何根據我們的需求選擇對應字型單位？我們經常接觸的就是單位px，因為它簡潔明瞭，人們可以直接讀取它的數值，所以備受人們的青睞。
隨著智慧裝置出現，我們常常需要在不同裝置之間進行切換。但移動裝置螢幕解析度相對小於傳統計算機顯示器，根據px的特性可能會出現佈局問題。正是由於px的缺點，當涉及到繼承關係、響應式佈局時，我們通常使用的字型單位就是em和rem這兩個單位。那麼，這兩者之間有何區別呢？
通過上圖我們可以瞭解到em和rem都是相對長度單位，都是以倍數關係
（a）、em的參照物件為父元素，如果沒有向上繼承，則參照物件為其自身。
（b）、rem的參照物件為根元素，即<html>標籤。
程式碼走起
【 HTML程式碼 】
<div class="container"> <div id="test1">這是text1文字 <div id="text2">這是text2文字 <div id="text3">這是text3文字 </div></div></div></div> <br /><br /> <div class="container"> <div id="box1">這是Box1文字 <div id="box2">這是Box2文字 <div id="box3">這是Box3文字 </div></div></div> </div>
【 CSS樣式 】
html{font-size: 24px;font-family: "微軟雅黑";color: #333;}
body{font-size: 16px;}
#text1{font-size: 1em;}
#text2{font-size: 2em;}
#text3{font-size: 3em;}
#box1{ont-size: 1rem;}
#box2{font-size: 2rem;}
#box3{font-size: 3rem;}【 結果 】
從上面的三幅圖我們可以看出，em和rem之間的關係（由於向下繼承的關係，所以container的字型大小為16px）
em中，text1是container的1倍為16px，text2是text1的2倍故為32px，而text3是text2的3倍故為96px
rem中，text1是html的1倍故為16px，text2是html的2倍故為32px，text3是html的3倍故為72px
從上述的介紹和例子我們可以看出，em和rem的區別挺明顯的。其實無論是臺式還是移動端開發，兩者其實都可以使用，只不過em需要注意繼承關係，並且需要修改多個內容，而rem恰恰相反，所以rem更適合移動式開發。也就是說，em是以自身父容器為參考物件的，而rem直接以HTML為參考物件的，在多層巢狀的情況下使用em很容易出現問題。