如何配置rem 移动端rem的设置

   首先给大家老生长谈的介绍一下什么是rem, 什么是em.
   em是相对长度单位,

• em的值并不是固定的；
• em会继承父级元素的字体大小。

   rem是CSS3新增的一个相对单位,而rem与em的最大区别是:

• rem是相对于HTML的根元素
• em相对于父级元素的字体大小。
  而通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
     废话不多说,直接上代码

  //按照宽度375图算， 1rem = 100px;
（function (win, doc) {
   function changeSize() {
     doc.documentElement.style.fontSize = doc.documentElement.clientWidth / 3.75 + 'px';
    console.log(100 * doc.documentElement.clientWidht / 3.75)
   }
   changeSize();
   win.addEventListener('resize', changeSize, false);

})(window, document);

   有些人可能会迷糊你这个是375的屏,如果我是750的屏应该如何修改呢? 其实这个是新手很容易陷入的一个误区.我屏幕换了这个比例是不是也改变了啊.
   其实这个是不会的,这个最初的初始值是按照UI给你提供的设计稿来设置的,如果说rem我转换的太麻烦了,我还是喜欢1px 这样的设置,也没有问题,按照375的屏计算的话, 获取到屏幕的宽度 / 375 .然后在把得到的值赋值给根字体就可以了,这样1rem等于1px.就可以去设置了.
   总而言之呢,这个具体把rem设置成多大,根据你的喜好和习惯来.你只需要关心三个点:

1. 赋值到根字体上面: doc.documentElement.style.fontSize
2. 获取屏幕的宽度: doc.documentElement.clientWidth
3. rem的比例是多少: 3.75

根据上面这个设置下来 就可以得到,屏幕宽度为375 / 3.75 = 100;
在把这个100赋值给根字体.就得到了 在375屏幕宽度下1rem == 100px.
   如果大家有任何疑问都可以随时在评论区留言指正.我会在第一时间回复大家或修改.