CSS：區別 px、em、rem
有何區別
px在縮放頁面時沒法調整那些使用它做爲單位的字體、按鈕等的大小；cssem的值並非固定的，會繼承父級元素的字體大小，表明倍數；htmlrem的值並非固定的，始終是基於根元素<html>的，也表明倍數。瀏覽器
em
em 的使用是相對於其父級的字體大小的，即倍數。瀏覽器的默認字體高都是 16px，未經調整的瀏覽器顯示 1em = 16px。可是有一個問題，若是設置 1.2em 則變成 19.2px，問題是 px 表示大小時數值會忽略掉小數位的（你想像不出來半個像素吧）。並且 1em = 16px 的關係很差轉換，所以，經常人爲地使 1em = 10px。這裏要藉助字體的 % 來做爲橋樑。字體
由於默認時字體 16px = 100%，則有 10px = 62.5%。因此首先在 body 中全局聲明 font-size=62.5%=10px，也就是定義了網頁 body 默認字體大小爲 10px，因爲 em 有繼承父級元素字體大小的特性，若是某元素的父級沒有設定字體大小，那麼它就繼續了 body 默認字體大小 1em = 10px。spa
可是因爲 em 是相對於其父級字體的倍數的，當出現有多重嵌套內容時，使用 em 分別給它們設置字體的大小每每要從新計算。好比說你在父級中聲明瞭字體大小爲 1.2em，那麼在聲明子元素的字體大小時設置 1em 才能和父級元素內容字體大小一致，而不是1.2em（避免 1.2*1.2=1.44em）, 由於此 em 非彼 em。再舉個例子：code
<span>Outer <span>inner</span> outer</span>
body { font-size: 62.5%; }
span { font-size: 1.6em; }
結果：外層 <span> 爲 body 字體 10px 的 1.6倍 = 16px，內層 <span> 爲外層內容字體 16px 的 1.6倍 = 25px（或26px，不一樣瀏覽器取捨小數不一樣）。htm
明顯地，內部 <span> 內的文字受到了父級 <span> 的影響。基於這點，在實際使用中給咱們的計算帶來了很大的不便。blog
rem
引述 MDN:繼承
rem values are relative to the root html element, not the parent element.element
rem 的出現不再用擔憂還要根據父級元素的 font-size 計算 em 值了，由於它始終是基於根元素（<html>）的。
好比默認的 html font-size=16px，那麼想設置 12px 的文字就是：12÷16=0.75(rem)
仍然是上面的例子，CSS改成：
html { font-size: 62.5%; }
span { font-size: 16px; font-size: 1.6rem; }
結果：內外 <span> 的內容均爲 16px。
須要注意的是，爲了兼容不支持 rem 的瀏覽器，咱們須要在各個使用了 rem 地方前面寫上對應的 px 值，這樣不支持的瀏覽器能夠優雅降級。兼容性詳情。
選擇使用什麼字體單位主要由你的項目來決定，若是你的用戶羣都使用最新版的瀏覽器，那推薦使用 rem，若是要考慮兼容性，那就使用 px，或者二者同時使用。
完。
參考
- 1. px em rem 區別
- 2. （CSS） px，pt，em，rem的區別
- 3. px,em,rem的區別
- 4. rem ,em ,px的區別
- 5. px、em、rem的區別
- 6. px em rem 的區別？
- 7. mobile css & rem & em & px
- 8. px，em和rem
- 9. px，em，rem
- 10. CSS單位：px、em、rem
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. px em rem 區別
- 2. （CSS） px，pt，em，rem的區別
- 3. px,em,rem的區別
- 4. rem ,em ,px的區別
- 5. px、em、rem的區別
- 6. px em rem 的區別？
- 7. mobile css & rem & em & px
- 8. px，em和rem
- 9. px，em，rem
- 10. CSS單位：px、em、rem