px em rem的詳解與區別

  在前端項目開發中，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,或者兩者同時使用。