REM布局理解以及解决方案

1. 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>

Untitled.png

<style>
    html{
      font-size: 32px;
    }
    div{
      font-size: 1rem;
    }
 </style>
<div>文字</div>

Untitled 1.png

1. 基于对上面REM的理解，那么要如何通过REM实现响应式布局呢？（REM布局原理）

答案是必须让REM变成一个相对动态的单位，在不同设备下REM的值是不一样的。既然REM的大小是基于html根元素的fontSize来决定的，就可以让html根元素的fontSize来根据设备的尺寸变化动态变化，从而达到REM动态计算的效果。

1. 那么如何动态设置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