詳解CSS中px em rem區別與使用

本文主要介紹了CSS中px em rem差異與使用。具有很好的參考價值。下面跟著小編一起來看下吧

最近在學習字體時遇到字體大小的設置，font-size單位可以是px或em或rem，那麼這幾種單位都有什麼差別呢，該如何使用呢？

px是像素影像的基本取樣單位，相對於顯示器螢幕解析度而已的，什麼是一個像素呢，你把一張圖一直放大，會看到一個個小的方格子，一個方格子就是一個像素。瀏覽器預設的字體大小是16px。

px的特色是：字體大小寫死固定了，是固定值，舊版IE無法縮放字體，但現在基本上都不用管低版的IE。所以一般情況都會使用這種單位，夠精確。

em是一個相對單位表示相對於其父親元素字體的大小而言，可以是小數，整數。例如父元素字體大小是16px,則1em就是16px,2em就是32px。

em的特點是：不是固定值，它的值會隨著父字體大小而改變。 使用場景：噹噹前元素的內部外邊距需要與目前字體大小成比例時，可以使用em。

rem也是一個相對單位與em的區別是，他是相對於根元素而言的，這樣在使用計算時就比em簡單方便多了，因為他的參考值就是根元素子圖大小，瀏覽器預設的是16px。

rem的特點是：相對於根元素字體大小，計算方便。可以透過控制html根字體大小來改變整個頁面字體大小，是頁面在哥哥尺寸的行動端自適應。

以上是詳解CSS中px em rem區別與使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！