移动端 REM布局

										移动端 REM布局

 这周我们在逆战班学习了移动端的布局方案，从这一周学习中我们了解了在移动端常用的布局方案分为流式布局、REM布局和响应式布局。在这里我就学习的内容总结下移动端的REM布局。

首先了解下REM布局的原理：页面中的元素采用rem作为尺寸或者间距的单位。在这里，1rem就是一个根元素的font-size的大小，所以我们要想办法去动态改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放。

  要想做到等比缩放我们就得用到vw与vh单位，这两个单位是相对单位，它们的原理就是将屏幕分为100份，每一个vw或者vh代表屏幕宽高的1%。也就是比如我们的屏幕宽为375px的时候，将它分为100vw，每一个vw代表3.75px，那么在此分辨率下想让我们的100px代表多少个vw，这就是100/3.75也就是26.6666667vw，这也就是我们的根元素的font-size为26.6666667vw即1rem=100px。这样我们就可以开始我们的REM布局。

  整个布局过程中我们的设计师给我们的设计图会大于我们的375px，这种情况下我们一般的操作步骤如下：

一、
先将设计师给我们的psd图中的资源全部拿到

二、
将我们的设计稿用PS设置为宽为375px，这样做的目的是方便于我们的快速和布局。

三、
按照实际大小去布局：也就是量取的多大就布局多大，在整个布局过程中的单位全部采用px与100%（不用去考虑rem的事情，我们只需要认定他就是给了一个375尺寸的设计稿）。在布局的开始我们要给我们的根元素也就是html标签设置font-size，html {font-size：26.6666667vw}，然后重置我们的body的字体大小，body{font-size：16px}

四、
等布局完成后我们在VScode中用px to rem的插件将我们所有的px单位全部改为rem单位，这样我们的rem布局就完成了。也就是它可以很好的去适配设备。