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
