css單位中的 px,em和rem的區別

1.國內外選擇區別：

　　國內比較喜歡用px

　　國外比較傾向於em 和 rem

 

2. 主要內容

 

1. px：

　　　　定義：像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。（例如大多數網頁製做經常使用圖片分辨率爲72，即每英寸像素爲72，1英寸等於2.54釐米。那麼經過換算能夠得出每釐米等於28像素。）

　　　　特色：

1. 1. 低版本 IE沒法調整那些使用px做爲單位的字體大小，即沒法使用瀏覽器的放大功能進而放大字號，但如今有所改觀。
   2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；
   3. Firefox可以調整px和em，rem，然而近96%的中國網民使用的是蛋疼的IE瀏覽器(或內核)。
2. em:

　　　　定義：（font size of the element相對長度單位）相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。

　　　　特色：

1. 1. em的值並非固定的;
   2. em會繼承父級元素的字體大小。
   3. 任意瀏覽器的默認字體高度16px（16像素）。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。爲了簡化font-size的換算，須要在css中的body選擇器中聲明font-size=62.5%，這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。在設計開發的時候只需對全體html設置font-size=62.5%，如用通配符*或html標籤{font-size:62.5%}，以便計算使用
2. rem：

　　　　定義：（font size of the root element）單位，這是近幾年才興起的流行單位，包括移動端內、WebApp已被普遍使用。

　　　　特色：

1. 1. 使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素，即相對於你設置的html的字號大小，這樣就起到了牽一髮而動全身的做用，只須要修改html根元素的字號大小，頁面裏的大小都會隨之改變。固然了兼容性嘛，除了萬惡的IE8如下是不鳥的，應對也很簡單，再寫一個絕對的單位hack下就成，如span{font-size：14；font-size：3rem}便可！