CSS中慣用的字型單位：px、em、rem和%的區別

CSS中慣用的字型單位：px、em、rem和%的區別 CSS中常用的字型單位：px、em、rem和%的區別 在剛接觸CSS時，px用的比較多，也很好理解，可是用久了就會發現有些缺陷，特別是在做響應式開發的時候。 那這麼多單位到底在什麼時候用什麼單位合適呢。今天就來探討一下。 先大致解釋一下這些單位的意思： 1、px CSS中常用的字型單位：px、em、rem和%的區別

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

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

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

1、px

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

像素單元的一個問題是,它沒有為視障讀者的擴充,以適應行動裝置。

2、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作為單位就行了【本文來自鴻網互聯 (http://www.68idc.cn)】。

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

3、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 值，這樣不支援的瀏覽器可以優雅降級。

4、%

百分比單位更像“em”單位,除了一些根本性的差異。首先,當前的字型大小等於100%(比如12 pt = 100%)。當使用百分比單位,你的文字在行動裝置上仍然保持完全的延展性和可訪問性。

一般來說,1 em = 16 px = 100%

個人總結：在一般的PC端網頁製作過程中，px和em用的比較多，在移動端一般採用rem。