我好像每次在寫文章之前總要寫一段和標題不相關的廢話，寫就寫吧，就當是送給自己的禮物，以後回想起來你不那麼幹燥乏味。ZFT學長突然和我講起這三個的區別和作用聽的我雲裡霧裡的，所以我打算寫一遍文章讓自己真正理解。因為之前一直都是再用PX的，em、rem瞭解的甚少。

CSS中的px？

px就是pixel的縮寫啦，pixel即畫素，絕對長度單位。畫素px是相對於顯示器螢幕解析度而言的。px是就是一張圖片中最小的點，一張點陣圖就是由這些點構成的。如果是螢幕的解析度是1024×768，也就是說水平方向上有1024個點，垂直方向上有768個點。如果解析度越高、那麼點就越小、畫面就越清晰。反之解析度就越低。
特點：
1、在IE上無法調整以PX作為單位的字型大小；
2、大本分網站能夠調整字型大小的原因的因為使用了em或者rem作為字型的單位；
3、FireFox上能夠調整px、em、rem，但是國內96%以上的使用者使用IE瀏覽器（或核心）。

CSS中的em ?

em 是相對長度單位，相對於當前物件內文字的字型尺寸。如果當前對行內文字沒有進行人為字型設定，那麼就相對於瀏覽器預設的字型大小。
特點：
1、em不是固定不變的；
2、em繼承父類的字型大小。
注意：
1、任何瀏覽器的預設字型大小都是16px，1em=10px ；
2、在寫CSS中的時候，在body選擇器中宣告Font-size=62.5%，那麼1em=10px；
3、因為em繼承父類的字型大小，那麼需要重新計算你定義的字型大小，避免重複計算了。

CSS中的rem

rem是CSS3新增的一個相對單位，我們前面說的em是相對於父類進行設定字型大小的，這就存在一個問題，就是我們在設定任何元素的字型大小時，都需要知道他父類的字型大小，就會打來無法預知的錯誤風險。而rem是相對於根元素，這樣就意味著，我們只需要在根元素確定一個參考值。
打個比方：
html{
font-size:62.5%/*1 0÷16*100 */
}

h4{
font-size:1.2rem; /* 12px */
}
p{
font-size:2.3rem; /* 24px */
}
相容性：
IE8以下的版本不支援，幾乎支援其他所有的瀏覽器。應對方法也很簡單，加一個絕對單位的宣告就可以了。
舉個例子：
p {font-size:14px; font-size:.1.4rem;}

我們使用rem就像px一樣方便，解決了px和em兩者不同之處。

注意：上文中所寫的為個人版權，如需轉載請註明出，歡迎聯絡作者，一起討論學習。
郵箱：[email protected]