CSS 單位 px rem em

單位轉換工具

點我

px

px是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，若是px要換算成物理長度，須要指定精度DPI(Dots Per Inch，每英寸像素數)，在掃描打印時通常都有DPI可選。Windows系統默認是96dpi，Apple系統默認是72dpi。

特色

1. IE沒法調整那些使用px做爲單位的字體大小（縮放）
2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位
3. Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)

em

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

特色

1em指的是一個字體的大小，它會繼承父級元素的字體大小，因此不是一個固定的值。任何瀏覽器的默認字體大小都是16px。因此12px = 0.75em。實際應用中爲了方便換算，一般會以下設置樣式：

body {
  font-size: 62.5%;
}

這樣，1em = 10px。經常使用的1.2em上就是12px。

在中文文章的格式中，每一個段落開頭都要空出2格，若是用px作單位，對於12px的字體則須要24px，以此類推，可是對於em來講就相對簡單了。

p {
  text-indent: 2em;
}

注意點

• 標籤嵌套字體增大

em是想對父元素的font-size屬性來決定字高的。那麼在多級嵌套下就會出現1.2em * 1.2em = 1.44em的問題出現。如：

<style>
  body { font-size: 62.5%; }
  .container { font-size: 1.2em; }
  .container p { font-size: 1.2em; }
</style>

<div class="container">
  我是文字1
  <p>我是文字2</p>
</div>

在上述例子中'我是文字2'會比'我是文字1'大，由於p的font-size屬性是基於1em = 12px的字高去計算自身內部的em值：

/* 1em = 16px -> 計算後 1em = 10px */
body { font-size: 62.5%; }

/* 1em = 10px -> 計算後 1em = 12px */
/* 在container中的字體 都會爲12px */
.container { font-size: 1.2em; }

/* 1em = 12px -> 計算後 1em = 14.4px */
/* 在p中的字體 都會爲14.4px */
.container p { font-size: 1.2em; }

因此若是想在p中使用一樣大小的字，不能設置爲1.2em，只能設置爲1em。

• IE中12px的漢字偏大

12px(1.2em)大小的漢字在IE中並不等於直接用12px定義的字體大小，而是稍大一點。你只需在body選擇器中把62.5%換成63%就能正常顯示了。緣由多是IE處理漢字時，對於浮點的取值精確度有限。

該象只發生在12px的漢字，英文不存在此現象。

body {
  font-size: 63%;
}

rem

rem是CSS3新增的一個相對單位（root em，根em）。這個單位與em的區別在於使用rem相對的是HTML根元素。只要根元素不修改font-size屬性，那麼rem的想對大小不會變，而em是相對父元素的font-size設置想對大小。

能夠避免em字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

p {
  font-size: 14px;
  font-size: .875rem;
}

優勢

不會出現像em那樣1.2em * 1.2em = 1.44em的狀況出現，由於rem是相對html的font-size設置，而em是相對父元素的font-size

<style>
  html { font-size: 62.5%; }
  .container { font-size: 1.2rem; }
  .container p { font-size: 1.2rem; }
</style>

<div class="container">
  <!-- '我是文字1'和'我是文字2'是同樣大的 -->
  我是文字1
  <p>我是文字2</p>
</div>

必須設置html的css樣式，不然會按照默認的1rem = 16px。

缺點

CSS3新增的特性，因此只有支持C3的瀏覽器才兼容。解決方法低版本瀏覽器使用px，高版本使用rem。