深入理解px、rem、em、vh、vw之間的差異

絕對長度

#px

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

相對長度

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

固定長度已經無法滿足我們現在的需求了。

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

rem

rem 與px 的計算關係

rem的值是px的倍數

在預設情況下font-size = 16px,那麼1rem = 16px

rem 如何修改與px的相對計算關係

我們可以在並且只能在html標籤（因為html節點是根節點，就是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 的計算關係

em的值是px的倍數

預設情況下font-size = 16px,那麼1em = 16px

em 如何修改與px的相對計算關係

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

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

rem 與 em 的區別

以上是深入理解px、rem、em、vh、vw之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！