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