首頁  >  文章  >  web前端  >  詳解CSS中(px em rem)區別與使用

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

高洛峰
高洛峰原創
2017-03-26 10:12:051345瀏覽

最近在學習字體時遇到字體大小的設置,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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn