px、em和rem三者區別
px
畫素（Pixel）。相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。
特點：
1. IE無法調整那些使用px作為單位的字型大小；
2. 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字型單位；
3. Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或核心)。
pt
是一個物理長度單位，指的是72分之一英寸。9pt=12px，可以依次換算。
em
相對長度單位，相對於當前物件內文字的字型尺寸。任意瀏覽器的預設字型高都是16px，所以未經調整的瀏覽器都符合: 1em=16px。
特點：
1. em的值並不是固定的；
2. em會繼承父級元素的字型大小。
<div style="font-size:20px;">
<p style="font-size:1em;">這裡1em=20px</p>
<p style="font-size:2em;">這裡2em=40px</p>
</div>
上面的例子就說明了em的值並非固定的，他是根據父元素的字型大小來決定的。如果父元素設定了font-size:20px，那麼1em=20px，2em=40px；如果父元素設定了font-size:30px，那麼1em=30px，2em=60px。依次類推。
rem
是CSS3新增的一個相對單位，可以理解為"root em"，相對於根節點html的字型大小來計算的，chrome/firefox/IE9+支援。任意瀏覽器的預設字型高都是16px，所以未經調整的瀏覽器都符合: 1rem=16px。
<html style="font-size:100px;">
<head>
<title></title>
</head>
<body>
<p style="font-size:1rem;">這裡1rem=100px</p>
<div style="font-size:50px;">
<p style="font-size:2rem;">這裡2rem=200px</p>
</div>
</body>
</html>
上面的例子說明了，rem的值只受到根節點html的字型大小影響，並不受父元素字型大小的影響。如果根節點html設定了font-size:100px，那麼1rem=100px，2rem=200px；如果根節點html設定了font-size:200px，那麼1rem=200px，2rem=400px。依次類推。
rem和em在為元素設定字型大小時，都是相對大小。區別在於：使用rem時，相對的只是HTML根元素。
rem這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。
注意：
谷歌瀏覽器chrome強制最小字型為12px，因此即使設定了小於12px的值，也會顯示成12px。因此，當你給html設定font-size:10px時，1rem並不是等於10px，而是等於12px
具體使用哪種字型單位，還是要根據專案實際情況來定的。rem更加適合不用考慮低版本瀏覽器相容問題的專案來使用。