px em rem的詳解與區別，pxemrem詳解

px em rem的詳解與區別，pxemrem詳解

  在前端項目開發中，px，em，以及rem都是頁面配置常用的單位，雖然它們是長度單位，但是所含的意義不一樣。通過複習和查閱，總結了以下知識。

      px像素（Pixel）

　　　　定義：相對長度單位。像素px是相對於顯示器螢幕解析度而言的。(引自CSS2.0手冊）

　　　　特點：

　　　　　　1：px代表的是像素，用它設定字型大小時，比較穩定和準確。

 

　　　  　　  2：px的數值是寫死的，Ie中沒辦法改變這些字型的大小。

　　　　 運用：

<style> p{font-size:18px}    </style>

 

 

       em

　　　　定義：是相對長度單位。相對於當前對象內文本的字型尺寸（通常是針對於其父元素的尺寸）。(引自CSS2.0手冊)

　　　　特點：

 　　　　　　1：em的值並不是固定的；

 

　　　　　　 2. em會繼承父級元素的字型大小。

　　　　運用：

　　　　　　任意瀏覽器的預設字型高都是16px，因此所有未經調整的瀏覽器都符合: 1em=16px。

  　　　　　為了簡化操作，在css的body標籤中聲明font-size為62.5%，這樣在寫原來的px的數值除以10，然後換上em就可以了，原因：16px*62.5%=10px，例如：12px=1.2em，

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

 

 

        rem (font size of the root element)

              定義：是CSS3新增的相對單位，它只是相對於html標籤來設定的。  

              特點： 只針對與html的大小而變化，通過它既可以做到只修改根項目就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。

　　　　 缺點： 相容性問題，IE6-8不支援該單位，解決辦法：就是在標籤中添加絕對單位如em，px。這樣IE6-8會自動忽略rem選擇em或px。

　　　　 運用：在css中html標籤添加font-size的值，一般是62.5%，為了方便計算。在所有的子標籤中就可以針對於html的大小進行改變。如：

<style>html {font-size: 62.5%;}body {font-size: 1.8rem;}h1 { font-size: 2.2rem;}</style>

 

 

 

  在新版本的瀏覽器都支援rem這個單位， 只有IE才有相容性問題，選擇使用什麼字型單位主要由你的項目開發來決定，如果你的使用者群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮相容性，那就使用px,或者兩者同時使用。