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

1、px：

 

px就是像素，用px設置字體大小的時候會比較精確，可是有時候咱們會使用不一樣屏幕尺寸去瀏覽網頁。當頁面相應的擴大或者縮小的時候，頁面的字體大小就會出現太小或者過大。因爲這種問題，就提出了使用em來定義頁面上字體大小。

2、em：

 

em是一個相對的值，而不是一個具體的值，是根據必定的比例去縮放字體，那麼就會出現一個問題，em的值是相對於誰的大小來縮放的，也就是說，縮放的基準是什麼？通常來講，em的大小是相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。

除了瀏覽器的初始字號設置以外，em也能夠從包含標籤中繼承尺寸信息。一個0.9em的類型尺寸將使文本在大部分以16px爲基礎尺寸的顯示器上爲大約14px高。可是若是你有一個帶.9em的字號的<p>標籤，而後在這個<p>標籤中有一個帶0.9em的<strong>標籤，這個<strong>標籤的em尺寸就不是14px而是12px（16*0.9*0.9）。所以在使用em值時要記住繼承這個特性。

3、rem：

rem是css3提出的新屬性，通常用於移動端。rem也是一個相對值，可是rem是相對於根元素（html）來講的。這樣的話能夠作到只修改根元素即可以調整全部字體大小。任意瀏覽器的默認字體高都是16px，所以咱們能夠簡化簡化font-size換算的方法：將body選擇器中聲明Font-size=62.5%，這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。

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

 

在這裏爲你們提供一個px,em,rem單位轉換工具

地址： http://pxtoem.com/