CSS字體單位px,em,rem的用法

在做網頁開發時，經常會用CSS來為頁面做樣式美化。當定義頁面的字體大小時，可用的單位有px,em,rem，這些單位怎么用？來一起看下。

操作方法

01
先看下html代碼，代碼簡單，二個div里有二段文字，body的樣式定義了字體的大小為16px，px單位即為像素大小。
02
看下頁面，由于div1, div2都沒有定義字符的大小，所以繼承了body定義的字體大小，為16px。
03
添加了代碼，為div1, 2都添加了樣式，d1，d2，字體大小都設置為1.5em。
04
運行頁面，看下結果。從圖中可以看到，字體變大了
05
但上面寫的1.5em究竟是多大像素？其實這里的em是相對于body定義的16px的，1.5em就是1.5倍的16px，即24px。
我們修改下代碼就可以驗證出來了,把d2的字體大小從1.5em改成24px，如圖。
06
運行頁面，可以看到二段文字的大小都是一樣的，1.5em在這里就是為24px.
07
再次修改代碼，在d1的div里加一個div，樣式為d3，定義的字體大小也為1.5em.
08
運行頁面，同樣為1.5em，d3的字體卻比d1的顯示大，為什么？
是由于d3的1.5em是相對d1來說的，因為它是在d1里面。d1是24px，d3就為24px * 1.5 = 36px了。
09
無論是在哪個內容里，我們都希望同樣的em大小，顯示的字體大小都一樣，要怎么改？
這就要用到rem這個單位了。rem是相對于根節點的，即相對于body節點。
修改代碼，把d3的 1.5em改為 1.5rem，如圖
10
運行頁面，可以看到三段文字的大小都一樣了。
End