淺析CSS中單位px、rem、em、vh、vw之間的區(qū)別
我要評論絕對長度
px
px是像素值，是一個固定的長度，比如我們的米，厘米一樣。
相對長度
為什么我們需要相對長度rem em等？
固定長度已經(jīng)不能滿足我們現(xiàn)在的需求了。
舉例：比如我們在縮小我們屏幕的時候，我們不僅僅是需要縮小我們的盒子的寬高，我們還想要讓我們字體大小也隨之縮小，這樣用戶體驗會更好一點。
rem
rem 與 px 的計算關系
rem的值是px的倍數(shù)
默認情況下font-size = 16px,那么1rem = 16px
rem 如何修改與px的相對計算關系
我們可以在并且只能在html標簽（因為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 的計算關系
em的值是px的倍數(shù)
默認情況下font-size = 16px,那么1em = 16px
em 如何修改與px的相對計算關系
我們可以在自己元素上面修改font-size : 32px， 從而1em = 32px
如果自己元素上面沒有設置font-size, 我們也可以在父元素上面設置font-size，從而來影響自己元素（孩子元素）使用的em的值。
rem 與 em 的區(qū)別
總結
到此這篇關于CSS中單位px、rem、em、vh、vw之間的區(qū)別的文章就介紹到這了,更多相關px、rem、em、vh、vw的區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
CSS 中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- 本文主要介紹了CSS中px em rem區(qū)別與使用。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-27
- 相信每位前端工程師們都有這么一個體會，國內的設計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別，又各自有什么優(yōu)劣呢？下面這篇文章小編就來給大2017-02-24
知識普及：徹底搞懂CSS中單位px和em,rem的區(qū)別
國內的設計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區(qū)別呢？下面腳本之家小編給大家詳細介紹下2016-05-06
這篇文章主要介紹了CSS 中 em 和 rem 單位的區(qū)別,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-24
