溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css的單位之間的區(qū)別

發(fā)布時間：2020-05-25 14:35:25 來源：億速云 閱讀：177 作者：鴿子 欄目：web開發(fā)

px

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

相對長度

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

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

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

rem

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

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

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

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

我們可以在并且只能在html標(biāo)簽（因為html節(jié)點是根節(jié)點，就是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 的計算關(guān)系

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

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

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

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

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

rem 與 em 的區(qū)別

以上就是深入理解px、rem、em、vh、vw之間的區(qū)別的詳細(xì)內(nèi)容，更多請關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手