CSS中px em rem區(qū)別與使用
發(fā)布時間：2017-03-27 09:35:47 作者：查小飛 
我要評論
我要評論本文主要介紹了CSS中px em rem區(qū)別與使用。具有很好的參考價值。下面跟著小編一起來看下吧
最近在學習字體時遇到字體大小的設置，font-size單位可以是px或em或rem，那么這幾種單位都有什么區(qū)別呢，該如何使用呢？
px是像素圖像的基本采樣單位，相對于顯示器屏幕分辨率而已的，什么是一個像素呢，你把一張圖一直放大，會看到一個個小的方格子，一個方格子就是一個像素。瀏覽器默認的字體大小是16px。
px的特點是：字體大小寫死固定了，是固定值，老版本IE無法縮放字體，但現(xiàn)在基本上都不用管低版本的IE。所以一般情況都會使用這種單位，夠精確。
em是一個相對單位表示相對于其父親元素字體的大小而言，可以是小數(shù)，整數(shù)。比如父元素字體大小是16px,則1em就是16px,2em就是32px。
em的特點是：不是固定值，它的值會隨著父字體大小而變化。 使用場景：當當前元素的內(nèi)外邊距需要與當前字體大小成比例時，可以使用em。
rem也是一個相對單位與em的區(qū)別是，他是相對于根元素而言的，這樣在使用計算時就比em簡單方便多了，因為他的參考值就是根元素子圖大小，瀏覽器默認的是16px。
rem的特點是：相對于根元素字體大小，計算方便?？梢酝ㄟ^控制html根字體大小來改變整個頁面字體大小，是頁面在哥尺寸的移動端自適應。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
淺析CSS中單位px、rem、em、vh、vw之間的區(qū)別
這篇文章主要介紹了CSS中單位px、rem、em、vh、vw之間的區(qū)別,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-25CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別詳解
這篇文章主要介紹了CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-03-16
這篇文章主要介紹了postcss-pxtorem移動端適配的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2019-12-03
這篇文章主要介紹了css基于媒體查詢和 rem 的響應式布局實踐的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-30
移動端使用 rem 單位時 css sprites 定位問題的解決
現(xiàn)在開發(fā)移動端 wap 頁面，相信大家都會使用強大的 rem 單位去適配各種機型和屏幕；這篇文章主要介紹了移動端使用 rem 單位時 css sprites 定位問題的解決，小編覺得挺不錯2018-06-20- 相信每位前端工程師們都有這么一個體會，國內(nèi)的設計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？下面這篇文章小編就來給大2017-02-24
知識普及：徹底搞懂CSS中單位px和em,rem的區(qū)別
國內(nèi)的設計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別呢？下面腳本之家小編給大家詳細介紹下2016-05-06
這篇文章主要介紹了CSS 中 em 和 rem 單位的區(qū)別,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-24
