px、em、rem和%的區別淺析

 

在剛接觸CSS時，px用的比較多，也很好理解，但是用久了就會發現有些缺陷，特別是在作響應式開發的時候。

那這麼多單位到底在何時用什麼單位合適呢？今天就來探討一下。

先大體解釋一下這些單位的意思：

一、px

px單位名稱爲像素，像素是固定大小的單元,用於屏幕媒體(即在電腦屏幕上讀取)。一個像素等於電腦屏幕上的一個點 (是你屏幕分辨率的最小分割)。許多網頁設計師在web文檔使用像素單位以生產瀏覽器渲染的像素完美呈現的網站。

像素單元的一個問題是,它沒有爲視障讀者的擴展,以適應移動設備。

二、em

em單位名稱爲相對長度單位。相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸，國外使用比較多；

em單位有以下特色

1. em的值並非固定的;

2. em會繼承父級元素的字體大小。

咱們在寫CSS的時候若是要用em爲單位，須要注意如下幾點：

　　1. body選擇器中聲明Font-size=62.5%;

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

　　3. 從新計算那些被放大的字體的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做爲單位就好了。

em是繼承父元素的字體大小，但是當父元素字體大小改變時，又得從新計算了，這不怎麼方便，還好rem解決了這個問題

三、rem

rem是CSS3新增的一個相對長度單位，只相對根目錄即HTML元素

因此咱們只要在html標籤上設置字體大小爲標準，文檔中的字體大小都會以此爲參照

html{font-size:62.5%; /* 10÷16=62.5% */}

body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */}

p{font-size:14px;font-size:1.4rem;}

兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持，爲了兼容不支持 rem 的瀏覽器，咱們須要在 rem 前面寫上對應的 px 值，這樣不支持的瀏覽器能夠優雅降級。

四、%

百分比單位更像「em」單位,除了一些根本性的差別。首先,當前的字體大小等於100%(好比12 pt = 100%)。當使用百分比單位,你的文字在移動設備上仍然保持徹底的可伸縮性和可訪問性。

通常來講,1 em = 16 px = 100%