PX為單位
相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
在Web頁面初期制作中，我們都是使用“px”來設置我們的文本，因為他比較穩定和精確。但是這種方法存在一個問題，當用戶在瀏覽器中瀏覽我們制作的Web頁面時，他改變了瀏覽器的字體大小，這時會使我們的Web頁面布局被打破。這樣對於那些關心自己網站可用性的用戶來說，就是一個大問題了。因此，這時就提出了使用“em”來定義Web頁面的字體。
PX特點
1. IE無法調整那些使用px作為單位的字體大小；
2. 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字體單位；
3. Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。
em為單位
相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。
前面也說了，使用是“px”為單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，要解決這個問題，我們可以使用“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作為單位就行了。
這種技術需要一個參考點，一般都是以<body>的“font-size”為基准。比如說我們使用“1em”等於“10px”來改變默認值“1em=16px”，這樣一來，我們設置字體大小相當於“14px”時，只需要將其值設置為“1.4em”。
body {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
h1 {font-size: 2.4em; /*2.4em × 10 = 24px */}
p {font-size: 1.4em; /*1.4em × 10 = 14px */}
li {font-size: 1.4em; /*1.4 × ? = 14px ? */}
為什么“li”的“1.4em”是不是“14px”將是一個問號呢？
因為在使用“em”作單位時，一定需要知道其父元素的設置，因為“em”就是一個相對值，而且是一個相對於父元素的值，
其真正的計算公式是：1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
這樣的情況下“1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個不確定值，那么解決這樣的問題，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。這樣一來可能又不是我們所需要的方法。
EM特點
1. em的值並不是固定的；
2. em會繼承父級元素的字體大小。
Rem為單位
rem是相對於根元素<html>，這樣就意味着，我們只需要在根元素確定一個參考值，，在根元素中設置多大的字體，這完全可以根據您自己的需，大家也可以參考下圖：
我們來看一個簡單的代碼實例：
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
我在根元素<html>中定義了一個基本字體大小為62.5%（也就是10px。設置這個值主要方便計算，如果沒有設置，將是以“16px”為基准 ）。
從上面的計算結果，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處。
瀏覽器的兼容性
rem是CSS3新引進來的一個度量單位，支持的瀏覽器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。
不過使用單位設置字體，可不能完全不考慮IE了，如果你想使用這個REM，但也想兼容IE下的效果，你可考慮“px”和“rem”一起使用，用"px"來實現IE6-8下的效果，然后使用“Rem”來實現代瀏覽器的效果
| 長度單位 | 版本 | 描述 |
|---|---|---|
| 文本相對長度單位 Font-relative Length Units | ||
| em | CSS1 | 相對於當前對象內文本的字體尺寸 |
| ex | CSS1 | 相對於字符“x”的高度。通常為字體高度的一半 |
| ch | CSS3 | 數字“0”的寬度 |
| rem | CSS3 | 相對於根元素(即html元素)font-size計算值的倍數 |
| 視口相對長度單位 Viewport-relative Length Units | ||
| vw | CSS3 | 相對於視口的寬度。視口被均分為100單位的vw |
| vh | CSS3 | 相對於視口的高度。視口被均分為100單位的vh |
| vmax | CSS3 | 相對於視口的寬度或高度，總是相對於大的那個。視口的寬度或高度被均分為100單位的vmax |
| vmin | CSS3 | 相對於視口的寬度或高度，總是相對於小的那個。視口的寬度或高度被均分為100單位的vmin |
| 絕對長度單位 Absolute Length Units | ||
| cm | CSS1 | 厘米 |
| mm | CSS1 | 毫米 |
| q | CSS3 | 1/4毫米（quarter-millimeters）; 1q = 0.25mm |
| in | CSS1 | 英寸（inches）; 1in = 2.54cm |
| pt | CSS1 | 點（points）; 1pt = 1/72in |
| pc | CSS1 | 派卡（picas）; 1pc = 12pt |
| px | CSS1 | 像素（pixels）; 1px = 1/96in |