深入理解CSS中em, rem, ex區別，及使用技巧

jvjs發表於2018-09-14
CSSREM

CSS 中常見尺寸

單位 描述
% 百分比
in 英寸
cm 釐米
mm 毫米
ex 一個 ex 是一個字型的 x-height。 (x-height 通常是字型尺寸的一半。)
pt 磅 (1 pt 等於 1/72 英寸)
pc 12 點活字 (1 pc 等於 12 點)
px 畫素 (計算機螢幕上的一個點)
em 1em 等於當前的字型尺寸。
2em 等於當前字型尺寸的兩倍。
例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。
在 CSS 中，em 是非常有用的單位，因為它可以自動適應使用者所使用的字型。
rem rem表示“Root EM”,字面上指的是根元素的em大小。
在Web文件的上下文中，根元素就是你的html元素。
如果沒有重置，html預設font-size:16px。

em 和 rem 比較

單位 特點
em 相對單位em是相對於元素本身的字型大小的。
在css中唯一例外的是font-size屬性，它的em和ex值指的是相對父元素的字型大小。
rem 集相對大小和絕對大小的優點於一身，
通過它既可以做到只修改根元素就成比例地調整所有字型大小，
又可以避免（使用em）字型大小逐層複合的連鎖反應

em 缺點

  1. em 的值並不是固定的；
  2. em 會繼承父級元素的字型大小。

舉例

body{
  font-size: 10px;
}

h2{
  display: block;
  width: 80%;
  font-size: 1.5em;
  margin: 0.5em;
}
h2的字型大小繼承了body字型， 10px * 1.5 = 15px
h2的margin屬性則是相對於本元素字型大小： 15px * 0.5 = 7.5px
如下圖所示

圖片描述

rem 使用小技巧

  1. body選擇器中宣告Font-size=62.5%;
  2. 將你的原來的px數值除以10，然後換上rem作為單位；

參考文章連結

css中單位em和rem
徹底弄懂css中單位px和em,rem的區別

相關文章