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