em、rem、px、的區別

泥猴桃發表於2019-02-16
REM

px

畫素，相對長度單位。畫素px 是相對於顯示器螢幕解析度而言的。
特點：
1.IE 無法調整使用px作為單位的字型大小；
2.國外大部分網站能夠調整的原因在於其使用了em 或者rem 作為字型單位；
3.Firefox 能夠調整px 和 em， rem ，但是96%以上的中國網民使用的是IE 瀏覽器（或者核心）。

pt

是一個物理長度單位，指的是72分之一英寸。9pt = 12px 可以一次換算。

em

相對長度單位，相對於當前元素內文字的字型尺寸。任意瀏覽器的預設字型高都是16px。所以未經調整的瀏覽器都符合：1em=16px
特點：
1.em 的值不是固定的；
2.em 會繼承父級元素的字型大小。

<div style="font-size:20px;">
    <p style="font-size:1em;">這裡1em=20px</p>
    <p style="font-size:2em;">這裡2em=40px</p>
</div>

上面的例子就說明了em 的值並非是固定的，他是根據父元素的字型大小來決定的。如果父元素設定了font-size:20px，那麼1em = 20px ， 2em = 40px；如果父元素設定了font-size: 30px, 那麼1em = 30px， 2em = 60px。依次類推。

rem

是css3新增的一個相對單位，可以理解為root em， 相對於根節點html 的字型大小來計算的。chrome/firefox/ie9+ 支援。任意瀏覽器的預設字型高度都是16px，所以未經調整的瀏覽器都符合：1rem = 16px。

<html style="font-size:100px;">
<head>
    <title></title>
</head>
<body>
     <p style="font-size:1rem;">這裡1rem=100px</p>
     <div style="font-size:50px;">
          <p style="font-size:2rem;">這裡2rem=200px</p>
     </div>
</body>
</html>

上面的例子說明了，rem 的值只收到根節點html 的字型大小影響，並不受父元素字型大小的影響。如果根節點html 設定了font-size:200px，那麼1rem = 200px。 2rem = 400px。依次類推。
rem 和em 在為元素設定字型大小時，都是相對大小。區別在於：使用rem 時，相對的只是html 跟元素。
rem 這個單位可謂集相對大小和絕對大小的優點於一身。通過它既能可以做到只修改根元素就成比例的調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。

注意：
谷歌瀏覽器chrome強制最小字型為12px，因此即使設定了小於12px的值，也會顯示成12px。因此，當你給html設定font-size:10px時，1rem並不是等於10px，而是等於12px

具體使用哪種字型單位，還是要根據專案實際情況來定的。rem 更加適合不用考慮低版本瀏覽器相容問題的專案來使用。

相關文章