在CSS中，尺寸單位分為兩類：相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素，又可以分為字體相對單位和視窗相對單位。字體相對單位有：em、ex、ch、rem；視窗相對單位有：vw、vh、vmin、vmax幾種。絕對長度單位則是固定尺寸，它們采用的是物理度量單位：cm、mm、in、px、pt以及pc。但在實際應用中，我們使用最廣泛的則是em、rem、px以及百分比（%）來度量頁面元素的尺寸。
- px：為像素單位。它是顯示屏上顯示的每一個小點，為顯示的最小單位。它是一個絕對尺寸單位，是不能變動的；
- em：它是描述相對於應用在當前元素的字體尺寸，所以它也是相對長度單位，可以變動。一般瀏覽器字體大小默認為16px，則2em == 32px；
- rem：它是描述相對於當前根元素字體尺寸，除了描述對象與em不同其余都和em一樣。
- %： 百分比，它是一個更純粹的相對長度單位，可以變動。它描述的是相對於父元素的百分比值。如50%，則為父元素的一半。
px
px像素，是絕對長度單位的一種，它的大小是根據用戶屏幕顯示器的分辨率決定的（因此不同的設備顯示相同的像素值也可能會有不同的結果）。
px特點
如果網頁設計人員使用px作為字體單位，那么其字體大小將不能被更改。
em
em是相對長度單位,相對於應用當前文本的字體尺寸。如果當前文本的字體尺寸未被定義，則相對於瀏覽器的默認字體尺寸。
em的特點
1.em的值並不是固定不變的。
2.em會繼承父級元素字體的大小
em單位轉化為像素值
本例是使用Chrome的版本為52.0.2743.116，
首先任意瀏覽器在默認狀態下的字體大小都是16px,都符合1em = 16px;
在 菜單欄-設置-顯示高級設置-網絡內容-自定義字體 中可查和更改自己瀏覽器的默認字體大小，
接下來我們來做一個簡單的轉換，
在默認字體大小情況下，1em = 16px,那么0.625em=10px。
這樣的話，為了簡化Font-size的換算，我們在根元素中設置Font-size:62.5%,
那么我們寫1em，通過擴大0.625倍就相當於10px，也就是1em = 10px，有了這個換算公式就可以輕松的把原本的px換算為em單位了。
原因如下：chrome中文版默認最小字符值12px,chrome英文版默認最小字符值10px。
不過這並不影響公式的實用性，因為12px也是一個相對較小的字體了，在IE10不存在這樣的問題。
弄懂了在哪兒修改默認字體的大小，以及px和em的基本關系，接下來再說一說em的繼承特點。
em是相對當前文本的字體尺寸，也就是說當前文本的字體尺寸也可能是相對於另一個文本的字體尺寸，這就存在繼承的關系了。
關於em就這么多了。
rem
em是相對長度單位,相對於應用<html>根元素的字體尺寸，除了和em的相對對象不同，em的其它特點都適用於rem。
比如：
em和rem都是改變字體大小的相對長度單位，
1rem = 16px （默認條件下）。
rem的特點
rem是相對於<html>根元素的字體尺寸，這一點和em不同。當em出現多重繼承的時候，字體的大小控制就會變得很麻煩，rem的出現就是為了克服這一缺點。
如果不做任何修改，瀏覽器默認字體的大小就是網頁根元素的字體大小，
如果要對網頁根元素字體大小進行修改，需要在<html>標簽中加上style="font-size:value"屬性，
%
百分比是相對於父元素的尺寸。
%的特點
百分比是相對於父元素的尺寸，這和em(相對於當前元素的字體尺寸)以及rem（相對於根元素的字體尺寸）都不同。
代碼：
結果圖：
從圖上我們可以看出：設置5em的div的第一行字符剛好為5個字符大小，因為如上所說，它是相對於當前元素字體的尺寸， 寬度占用90px，5 X 18 = 90px。設置5rem的div第一行字符要小一些，因為如上所說，它是相對於根元素字體大小（默認為瀏覽器大小16px），比18px要小一些，寬度占用80px，5 X 16 = 80px。設置百分比顯示的第一行最大，因為如上所說，它是相對於父元素的尺寸比例， 寬度占用160px，200 X 80% = 160px。
參考資料：
http://www.aichengxu.com/view/4791151
http://blog.csdn.net/woaiwojiaweihao150/article/details/49933653
http://www.open-open.com/lib/view/open1438141484831.html
http://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
http://www.runoob.com/w3cnote/px-em-rem-different.html