REM布局粗浅理解及应用

为什么需要rem布局？

移动端设备很多，每个尺寸不一样，前端写的页面要在不同设备上进行展示，为了使页面在不同的移动设备上展示时不走样，需要一种布局，能在不同设备上进行缩放，以达到上述要求。

为什么rem布局是用html标签的font-size呢？

（这个问题很蠢，但是还是记录下来吧）
因为html标签的font-size的大小就是1rem，1rem指的是html标签的font-size大小。所以不用其他标签的font-size值来做rem布局。（很蠢吧）

应用

目前用的VUE做项目，就说说VUE中怎么使用。
1.首先在index.html文件中设置rem的值

  var docEl = document.documentElement // 获取html标签
  var width = docEl.getBoundingClientRect().width // 获取HTML元素的宽度，我也理解为获取设备宽度
  var rem = width
  docEl.style.fontSize = rem + 'px' // 设置rem的值
      

注意：实际项目中，设置rem的值不仅仅只有这么点代码，上面只是核心代码，你还要考虑页面的缩放等等情况，在不同的情况进行rem值的设置。

2.我们虽然设置好了1rem的值是多少。但是我们写代码时不太可能把UI给的设计图的px转换成rem来写，我们的代码中长度单位依然是px。如果我们没有用rem作为长度单位，那么rem布局就不会起作用。这时候我们需要一个转换工具将我们代码中的px转换成rem。这里我使用的是postcss-pxtorem，用这种转换工具来将px转换成rem。（网上很多关于postcss-pxtorem在vue.config.js文件中的配置，你们可以看下。我这种是在.postcssrc.js文件中配置的）

3.这时候我们就可以运行vue项目了。运行vue项目之后，你就会发现如下变化，这时候就说明，我们的rem布局生效了。

4.px转换为rem的转换规则是：代码中的 实际的px / rootvalue。例如这里的padding-bottom。
代码中的值为：40px

40 / 750 = ???呢 当然是0.0533333

5.我们知道padding-bottom的rem是多少。这时我们根据1rem的值就能求出rem实际的px值。（这里使用的是375*667的屏幕，HTML标签font-size的值为375.2） 375.2 * 0.0533 = 20.009416

注意：我代码写的40px，为什么这里只展示了20呢？想通这里才是关键哦。
因为我代码里的40px是根据UI设计的图纸来的（UI设计图纸一般是按750来设计的），而我们的屏幕大小使用的是375大小的，所以会小一半哦。铁子们，走到这是不是惊奇的发现，UI设计的750的图也能在375的屏幕中缩放显示，这不就是rem布局需要实现的吗！！！！！

重点1：postcss-pxtorem只是将我们代码中的XXpx转换成了XXrem，并没有起到决定元素大小的决定性作用。起决定性作用的是我们index.html中设置的Html标签的font-size的大小。（不信的可以试试，你变化index.html中的font-size值，0.0533rem是不会变的，但是20.009是会变化的）

重点2：我们在网上看到的rem布局大多将rootValue的值设置为75，将font-size的值除以10（除数）。（目前我不知道为什么要除以10，我认为rootvalue和fontsize的值可以任意写，但是rootvalue和font-size的值还是有联系的rootvalue * 除数 = 750，这里的750是设计稿，你的设计稿不是750的话，需要另外设值）。我这边设置rootvalue为750，除数为1，font-size设置为屏幕宽度，是为了好理解rem布局在一个满足不同设备显示同一页面。