淺談px,em與rem

關於px

px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位 ，不會由於其餘元素的尺寸變化而變化

關於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做爲單位就好了。

em有以下特色：

一、em的值並非固定的；

二、em會繼承父級元素的字體大小。

因此咱們在寫CSS的時候，須要注意兩點：

一、body選擇器中聲明Font-size=62.5%；

二、將你的原來的px數值除以10，而後換上em做爲單位；

三、從新計算那些被放大的字體的em數值。避免字體大小的重複聲明。

也就是避免1.2 * 1.2= 1.44的現象。好比說你在#content中聲明瞭字體大小爲1.2em，那麼在聲明p的字體大小時就只能是1em，而不是1.2em, 由於此em非彼em，它因繼承#content的字體高而變爲了1em=12px。

任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合1em=16px。
在css中的body選擇器中聲明Font-size=62.5%，這就使em值變爲16px*62.5%=10px;12px就等於1.2em

關於rem

css3新增了相對單位 rem (IE8及如下不支持該單位),使用rem同em同樣皆爲相對字體大小單位，不一樣的是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/}