css經常使用單位px、em、 rem 區別與各自的用法解析

咱們在佈局頁面中，總要用到一些有關字體，元素寬度，高度等長度單位，通常pc端經常使用到像素單位，移動端用em，rem 單位，它們都有各自的特色，今天總結一下它們的特色、區別 px是Pixel的縮寫，也就是說像素是指基本原色素及其灰度的基本編碼，由 Picture(圖像) 和 Element（元素）這兩個單詞的字母所組成的，如同攝影的相片同樣，數碼影像也具備連續性的濃淡階調。以下圖例子：

px是固定大小的單位,像素的計算針對（電腦/手機）屏幕的，一個像素就是屏幕上的一個點，即屏幕分辨率的最小單位。

em是emphasize縮寫，是一個相對長度單位。相對於當前對象內文體的字體尺寸。若是沒有人爲設置當前對象內文本的字體尺寸，那麼它相對的是瀏覽器默認的字體尺寸（16px）, 基準點爲父節點字體的大小，若是自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值,比較適合移動端設置，特別是響應式，運用較多，em在國外用的比較多以下圖例子

pt單位名稱爲點（Point），絕對長度單位通常老版本的table使用長度大小單位可是基本上沒有再使用。

rem（font size of the root element） 是css3新增的相對長度單位，它的出現彌補了em不能解決的問題，em是相對於父元素的字體大小，當父級元素字體大小改變時，又得從新計算。rem只相對於根目錄 即HTML元素。因此只要在html標籤上設置字體大小。文檔中的字體大小都會以此爲參照標準，比較適用於自適應佈局。 以下圖例子：

幾種單位都有各自的優勢和缺點，建議根據狀況而定