在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是相對長度單位,相對於應用根元素的字型尺寸，除了和em的相對物件不同，em的其它特點都適用於rem。
比如：em和rem都是改變字型大小的相對長度單位，
1rem = 16px （預設條件下）。
rem的特點
rem是相對於根元素的字型尺寸，這一點和em不同。當em出現多重繼承的時候，字型的大小控制就會變得很麻煩，rem的出現就是為了克服這一缺點。
如果不做任何修改，瀏覽器預設字型的大小就是網頁根元素的字型大小，
如果要對網頁根元素字型大小進行修改，需要在標籤中加上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。
參考資料：
CSS尺寸單位 px em rem 詳解
在css中，尺寸單位分為兩類 相對長度單位和絕對長度單位。相對長度單位按照不同的參考元素，又可以分為字型相對單位和視窗相對單位。字型相對單位有 em ex ch rem 視窗相對單位有 vw vh vmin vmax幾種。絕對長度單位則是固定尺寸，它們採用的是物理度量單位 cm mm in px p...
區別css單位px em rem
一般瀏覽器預設1em 16px，通過設定font size大小來代表如 16px 0.625 10px，其則代表1em 10px，直接上 注釋的樣式為瀏覽器預設 1em 16px 的長寬 在進行轉換之前，我們一定要檢視瀏覽器預設字型 最小 大小，如chrome瀏覽器，預設字型最小為12px，所以即使...
區別CSS單位中的px，em，rem
px畫素 pixel 相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。引自css2.0手冊 px特點 1.ie無法調整那些使用px作為單位的字型大小 2.國外的大部分 能夠調整的原因在於其使用了em或rem作為字型單位 3.firefox能夠調整px和em，rem，但是96 以上的中國網民使用...