（CSS） px，pt，em，rem的區別

時間 2019-12-06

標籤 css rem 區別欄目 CSS 简体版

原文原文鏈接

1、絕對長度單位

絕對長度單位表明一個物理測量，當輸出介質的物理性質是已知的，如用於打印佈局。這是經過將一個單元錨定到一個物理單元，並將其定義爲相對於它的另外一個。對於低分辨率的設備，如屏幕、高分辨率設備，如打印機，該錨定是不一樣的。css

1.1 `px`（像素）

像素與顯示設備相關。對於屏幕顯示，一般是一個設備像素（點）的顯示。對於打印機和高分辨率的屏幕，一個px意味着多個設備像素，所以，每英寸的像素的數量保持在96左右。html

當你須要精確地像素時，用px設定字體大小是一種好方法。一像素的大小是固定的。這是一個不取決於平臺的、跨瀏覽器的準確設置字體大小高度爲你所想的像素大小的方法。由於不一樣瀏覽器爲獲得一樣效果的算法可能不一樣，因此顯示效果可能有微小的不一樣。算法

用像素字體定義使得字體大小不可由用戶的瀏覽器改變。因此，若是想創造能普遍使用的設計請避免使用像素設定字體。瀏覽器

1.2 `pt`（磅）

1pt = (1 / 72)in。
另外：1in = 96px，3pt = 4px，25.4mm = 96px等。佈局

2、相對長度單位

相對字體大小的單位字體

2.1 `em`

em值的大小是動態的。當定義font-size屬性時，1em等於元素的父元素的字體大小。若是你在網頁中任何地方都沒有設置文字大小的話，那它將等於瀏覽器默認文字大小，一般是16px。因此一般1em = 16px，2em = 32px。若是你設置了body元素的字體大小爲20px，那1em = 20px，2em = 40px。那個2就是當前em`大小的倍數。設計

<body>
  <div class = "parent">
    <div class = "child></div>
  </div>
</body>

body {
  font-size: 62.5%; /* 1em = 10px */
}
.parent {
  font-size: 2em; /* 2em = 20px */
}
.child {
  font-size: 2em; /* 2em = 40px 相對於.parent元素 */
}

使用時需注意1em指的是父元素的字體大小。code

2.2 `rem`（`root em`）

rem是CSS3新增的單位，1rem等於html根元素的字體大小。經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。htm

<body>
  <div class = "parent">
    <div class = "child></div>
  </div>
</body>

body {
  font-size: 62.5%; /* 1rem = 10px */
}
.parent {
  font-size: 2rem; /* 2rem = 20px */
}
.child {
  font-size: 2rem; /* 2rem = 20px 相對於body元素 */
}

IE8及如下不支持rem，可多寫一個px爲單位的樣式便可。rem