px、em和rem的區別和使用案例
1.首先介紹一下px
px就是css中最基本的長度單位了，用px做單位基本上沒什麼問題，可以做到讓頁面按套路精確的展現！
可但是！但可是！如果全篇用px佈局會暗藏一個蛋疼的問題，就是當用戶和Ctrl滾頁面的時候（說白了就是ctrl+，ctrl-），你會發現頁面結構產生了不可預知的錯亂，因此有磚家倡導使用em替代px。。。。。
2.接下來介紹一下em
如果你從上到下閱讀此文，你應該已經知道了em出現的原因，下面說說em的特性，簡單的講px是絕對單位，1px就是1px，2px就是2px，以此類推，而em是相對單位，em相對的基準點就是瀏覽器的字型大小，瀏覽器預設字型大小是16px，也就是1em預設等於16px，如果你想給某個文字設定為14px，就這樣寫 font-size:0.875em;
這時候有人和我一樣就會抱怨了，我的數學是體育老師教的，除以16我怎麼可能算明白，那好辦你可以在根節點<html>上重定義基準字號 html {font-size:62.5%} ，此時頁面基準字號就是 16px * 62.5% = 10px , 那麼此時 1em = 10px，那麼此時14px = 1.4em，15px=1.5em，依次類推，就算你數學是要飯的教的應該也會算了吧-。-！
可但是！但可是！問題又來了，em準確的說是相對於父節點的字號來計算的，如果自身定義了字號那麼就相對自身字號來計算，舉例如下：
html { font-size: 100%; }
.box-0 {
height: 1em; /* 此時height等於16px */
}
.box-1 {
font-size: 0.625em; /* 此時基準字號以變更為16*0.625=10px */
height: 1em; /* 此時實際height等於10px */
}
看明白了吧，在整個頁面內1em並不是一個固定不變的值，1em不停的變換，再加上數學是體育老師教的，這不是自作孽嗎。。。沒關係，css3為我們引入一個新的單位就是rem可以解決這個問題
3.最後介紹一下主角rem
rem和em一樣也是一個相對單位，為了方便理解，我們就理解rem為root em，顧名思義rem只相對跟節點<html>計算，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同em，預設1rem=16px; 同理你可以設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推。。。
宣告一下：rem是css3屬性，沒錯！這就是說屌絲ie678不支援rem屬性，只有chrome、firefox等高富帥支援！那麼我們就在ie678中用px做相容處理，例如：
.box {
font-size: 14px; /* 用來相容ie678 */
font-size: 0.875em;
}