REM布局理解以及解決方案
- REM的理解
REM
是一個相對長度單位,它是基于html
根元素的fontSize
來動態計算的,默認情況下html
根元素的fontSize
是16px
,也就是說:1rem=16px
。
如果設置html
元素的fontSize:32px
,那么對應的1rem=32px
。此時,html
根元素的fontSize
是寫死的,此時rem
的值也是固定的,不管在什么設備下1rem=32px
。
<style>
div{
font-size: 1rem;
}
</style>
.....
<div>文字</div>
<style>
html{
font-size: 32px;
}
div{
font-size: 1rem;
}
</style>
<div>文字</div>
- 基于對上面
REM
的理解,那么要如何通過REM
實現響應式布局呢?(REM布局原理)
答案是必須讓REM
變成一個相對動態的單位,在不同設備下REM
的值是不一樣的。既然REM
的大小是基于html
根元素的fontSize
來決定的,就可以讓html
根元素的fontSize
來根據設備的尺寸變化動態變化,從而達到REM
動態計算的效果。
-
那么如何動態設置
html
的fontSize
的大小呢?(REM布局實現方案)使用
VW
單位設置html
的fontSize
。VW
是一個視口單位,任何設備屏幕寬度都可用100vw
表示,即把設備屏幕切割成100
份,每一份就是1vw
,那么針對不同尺寸的設備,1vw
表示的單位值也就不一樣。用vw
來設置html
的fontSize
就可以實現動態變化了。那么
html
的fontSize
設置多少vw
合適呢?以
iPhone6
設備為例,iPhone6
的設備寬度是375px
,即在iPhone6
設備上100vw=375px
,通過比例關系100vw:375px = x:100px
可以得出100px=26.66667vw
,那么這個26.66667vw
就是要設置給html
的fontSize
值了。這時候可能就有人會有疑問,為什么要用
100px
來化簡出26.66667vw
為html
的fontSize
值?這是因為設置
100px
是為了在使用的時候更加方便快捷的進行px
到rem
的數值轉換。設置html
的fontSize
為26.66667vw
后,1rem=26.66667vw=100px
,如果設計稿對應的元素是16px
,根據比例化簡:1rem:100px = xrem:16px
,可以得出:x=0.16
,即16px=0.16rem
,這樣就可以很快捷的進行px
到rem
的轉化,所以這里用100px
作為化簡值,不一定是必須的,你可以用10px
或者其他,化簡到對應的vm
值,方便計算即可。此時,
html
根元素的fontSize
值為26.66667vw
就是一個可以動態變化的值,不同尺寸屏幕下對應的值也就不同,rem
對應的值也就會不同。<style> html{ font-size: 26.66667vw;} div{ font-size: 1rem;} </style> ... <div>文字</div>
Untitled 2.png
Untitled 3.png