REM布局理解以及解決方案
- REM的理解
REM是一個相對長度單位微酬，它是基于html根元素的fontSize來動態(tài)計算的，默認情況下html根元素的fontSize是16px 佣谐，也就是說：1rem=16px。
如果設(shè)置html元素的fontSize:32px，那么對應(yīng)的1rem=32px疚脐。此時生宛，html根元素的fontSize是寫死的县昂，此時rem的值也是固定的，不管在什么設(shè)備下1rem=32px陷舅。
<style>
div{
font-size: 1rem;
}
</style>
.....
<div>文字</div>
<style>
html{
font-size: 32px;
}
div{
font-size: 1rem;
}
</style>
<div>文字</div>
- 基于對上面
REM的理解倒彰，那么要如何通過REM實現(xiàn)響應(yīng)式布局呢？（REM布局原理）
答案是必須讓REM變成一個相對動態(tài)的單位莱睁，在不同設(shè)備下REM的值是不一樣的待讳。既然REM的大小是基于html根元素的fontSize來決定的，就可以讓html根元素的fontSize來根據(jù)設(shè)備的尺寸變化動態(tài)變化仰剿，從而達到REM動態(tài)計算的效果创淡。
-
那么如何動態(tài)設(shè)置
html的fontSize的大小呢？（REM布局實現(xiàn)方案）使用
VW單位設(shè)置html的fontSize南吮。VW是一個視口單位琳彩，任何設(shè)備屏幕寬度都可用100vw表示，即把設(shè)備屏幕切割成100份部凑，每一份就是1vw露乏，那么針對不同尺寸的設(shè)備，1vw表示的單位值也就不一樣涂邀。用vw來設(shè)置html的fontSize就可以實現(xiàn)動態(tài)變化了瘟仿。那么
html的fontSize設(shè)置多少vw合適呢？以
iPhone6設(shè)備為例比勉，iPhone6的設(shè)備寬度是375px劳较，即在iPhone6設(shè)備上100vw=375px，通過比例關(guān)系100vw:375px = x:100px可以得出100px=26.66667vw浩聋，那么這個26.66667vw就是要設(shè)置給html的fontSize值了观蜗。這時候可能就有人會有疑問，為什么要用
100px來化簡出26.66667vw為html的fontSize值衣洁？這是因為設(shè)置
100px是為了在使用的時候更加方便快捷的進行px到rem的數(shù)值轉(zhuǎn)換嫂便。設(shè)置html的fontSize為26.66667vw后，1rem=26.66667vw=100px,如果設(shè)計稿對應(yīng)的元素是16px闸与，根據(jù)比例化簡：1rem:100px = xrem:16px毙替，可以得出：x=0.16岸售，即16px=0.16rem,這樣就可以很快捷的進行px到rem的轉(zhuǎn)化，所以這里用100px作為化簡值厂画，不一定是必須的凸丸，你可以用10px或者其他，化簡到對應(yīng)的vm值袱院，方便計算即可屎慢。此時，
html根元素的fontSize值為26.66667vw就是一個可以動態(tài)變化的值忽洛，不同尺寸屏幕下對應(yīng)的值也就不同腻惠，rem對應(yīng)的值也就會不同。<style> html{ font-size: 26.66667vw;} div{ font-size: 1rem;} </style> ... <div>文字</div>Untitled 2.png
Untitled 3.png
