em,rem,px之間的轉換

 

::>_<::咱們在寫css樣式時，常常會遇到字體大小在不一樣的瀏覽器不一樣的設備上顯示不一致的狀況，通常有這幾種單位可供開發者選擇：em,rem,px。下面我就介紹一下這幾種單位 

 

1、px：是像素（Pixel）的簡寫。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。

 

PX特色:

 

一、 IE沒法調整那些使用px做爲單位的字體大小；

 

二、 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；

 

三、 Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)。

 

2、em:是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。

 

一、任意瀏覽器的默認字體高都是16px。

全部未經調整的瀏覽器都符合: 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做爲單位就好了。

 

因此咱們在寫CSS的時候，須要注意兩點：

a. body選擇器中聲明Font-size=62.5%；

b. 將你的原來的px數值除以10，而後換上em做爲單位；

 

二、從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

em特色 

（1）、 em的值並非固定的；

 

（2）、 em會繼承父級元素的字體大小。

 

3、rem:是css3新增的一個相對單位（root em，根em）

rem，這個單位引發了普遍關注。這個單位與em有什麼區別呢？

區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML 根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反 應。

目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。

對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略 用rem設定的字體大小。

 

 

PS：下面是一個px,em,rem單位轉換工具

http://pxtoem.com/