rem的使用

参考：https://www.cnblogs.com/jony-it/p/11225143.html、https://www.cnblogs.com/xiaozhumaopao/p/8260447.html

移动端的页面

/*针对移动端页面
 * 手动实现的基于375像素设计图rem布局
 */
    getRem() {
      var oWidth = document.body.clientWidth || document.documentElement.clientWidth
      console.log('oWidth', oWidth);
      let _html = document.getElementsByTagName('html')[0]
      _html.style.fontSize = oWidth / 7.5 + 'px'
    }
// 在页面加载完成使用，在页面的尺寸更改时使用

rem单位转换的方法：

• 方法一： 蓝湖 100rem -> 直接看设计rem大小就好
• 方法二： 蓝湖 375px -> 自己计算 蓝湖px大小 / 50

rem的转换原理：
「rem」是指根元素（root element，html）的字体大小，从遥远的 IE6 到版本到 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。
rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小；
所以1rem16(这个是html的fontsize)=16px;
2rem16=32px;
要想让rem和px成100倍的关系，即1rem*100=100px；则html的字体大小就应该是100px；

如果是750px的设计稿，但是手机是375px的屏幕，按照上面的JS动态计算根元素的font-size的值为750/7.5=100px，则设置的根元素是100px，则100px等同于1rem（px和1rem转换的px的比值为7.5， 750px/100px(1rem) = 7.5），则有下面的推算：
对应750的设计稿 视觉稿测量100px—>1rem
375屏幕手机（是750的一半） 页面显示为 50px—>1rem
所以1rem和px对应关系是 50倍 对于 ： 屏幕宽度/7.5=375/7.5=50px ；
这样1rem50=50px（50px是375屏幕上的长度，相当于750上的100px）；
============================================================
如果是375px的设计稿，手机是375px的屏幕：
对应375的设计稿 视觉稿测量100px—>1rem
375屏幕手机 页面显示为 100px—>1rem
所以1rem和px对应关系是100倍 对于： （屏幕宽度/7.5）2=（375/7.5）2=100px ；
这样1rem100=100px（100px是375屏幕上的长度，相当于350上的100px）；
============================================================
综上所述，对于750的设计稿，375的手机和设计稿是50%的关系，所以设计稿上100px，
对应着375手机上的50px；也就是1rem对应着50px；
document.documentElement.style.fontSize=(a/7.5)*1+”px”

对于375的设计稿，375的手机和设计稿是100%的关系，所以设计稿上100px，
对应着375手机上的100px；也就是1rem对应着100px；
document.documentElement.style.fontSize=(a/7.5)*2+”px”

PC端的页面

如果是PC端的页面想要使用rem，则将PC端页面的参考尺寸除以7.5就是1rem对应的px的值

例如：
如果页面尺寸是1920，则将1920/7.5=256，那么1rem就等于256px