欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析CSS中單位px、rem、em、vh、vw之間的區(qū)別

  發(fā)布時(shí)間：2020-05-25 14:48:49   作者：佚名   我要評論
這篇文章主要介紹了CSS中單位px、rem、em、vh、vw之間的區(qū)別,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

絕對長度

px

px是像素值，是一個(gè)固定的長度，比如我們的米，厘米一樣。

相對長度

為什么我們需要相對長度rem em等？

固定長度已經(jīng)不能滿足我們現(xiàn)在的需求了。

舉例：比如我們在縮小我們屏幕的時(shí)候，我們不僅僅是需要縮小我們的盒子的寬高，我們還想要讓我們字體大小也隨之縮小，這樣用戶體驗(yàn)會(huì)更好一點(diǎn)。

rem

rem 與 px 的計(jì)算關(guān)系

rem的值是px的倍數(shù)

默認(rèn)情況下font-size = 16px,那么1rem = 16px

rem 如何修改與px的相對計(jì)算關(guān)系

我們可以在并且只能在html標(biāo)簽（因?yàn)閔tml節(jié)點(diǎn)是根節(jié)點(diǎn)，就是rem里面的r：root）里面修改font-size : 32px， 從而1rem = 32px

代碼

<div class="div-rem">rem</div>
/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.div-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

em 與 px 的計(jì)算關(guān)系

em的值是px的倍數(shù)

默認(rèn)情況下font-size = 16px,那么1em = 16px

em 如何修改與px的相對計(jì)算關(guān)系

我們可以在自己元素上面修改font-size : 32px， 從而1em = 32px

如果自己元素上面沒有設(shè)置font-size, 我們也可以在父元素上面設(shè)置font-size，從而來影響自己元素（孩子元素）使用的em的值。

rem 與 em 的區(qū)別

總結(jié)

到此這篇關(guān)于CSS中單位px、rem、em、vh、vw之間的區(qū)別的文章就介紹到這了,更多相關(guān)px、rem、em、vh、vw的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別詳解

    這篇文章主要介紹了CSS 中px、em、rem、%、vw、vh單位之間的區(qū)別，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2020-03-16

  • postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn)

    這篇文章主要介紹了postcss-pxtorem移動(dòng)端適配的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)
    2019-12-03

  • css基于媒體查詢和 rem 的響應(yīng)式布局實(shí)踐

    這篇文章主要介紹了css基于媒體查詢和 rem 的響應(yīng)式布局實(shí)踐的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-30

  • 移動(dòng)端使用 rem 單位時(shí) css sprites 定位問題的解決

    現(xiàn)在開發(fā)移動(dòng)端 wap 頁面，相信大家都會(huì)使用強(qiáng)大的 rem 單位去適配各種機(jī)型和屏幕；這篇文章主要介紹了移動(dòng)端使用 rem 單位時(shí) css sprites 定位問題的解決，小編覺得挺不錯(cuò)
    2018-06-20

  • CSS中px em rem區(qū)別與使用

    本文主要介紹了CSS中px em rem區(qū)別與使用。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-27

  • css中px、em和rem的區(qū)別總結(jié)

    相信每位前端工程師們都有這么一個(gè)體會(huì)，國內(nèi)的設(shè)計(jì)師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？下面這篇文章小編就來給大
    2017-02-24

  • 知識普及：徹底搞懂CSS中單位px和em,rem的區(qū)別

    國內(nèi)的設(shè)計(jì)師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別呢？下面腳本之家小編給大家詳細(xì)介紹下
    2016-05-06

  • CSS 中 em 和 rem 單位的區(qū)別解析

    這篇文章主要介紹了CSS 中 em 和 rem 單位的區(qū)別,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-05-24

最新評論