rem原理解析

背景：

在移动端的页面开发中，我们经常需要根据不同的手机去适配页面，让页面可以自适应的展示。

也就是说根据屏幕宽度的大小，改变元素和字体的大小，屏幕越宽元素和字体越大。

这个时候我们通常会用到rem作为单位

rem解释：

rem是css3中新增的一个单位，它是一个相对单位

rem用作非根元素的时候，是相对于根元素设定的字体大小,，用于根元素的时候，相对于初始字体的大小

原理：

假设将屏幕平均分成10份，每一份所占的宽度为x

那么 x = 屏幕宽度/10

假如我们把每一份的宽度作为x根元素的字体大小，那么页面内部的元素和字体大小可以根据x计算

w = width/x (rem)

x = document.documentElement.clientWidth / 10 + 'px'

这个时候我们可以在监听页面dom 加载完成，或这页面重置，以及屏幕旋转的状态，通过js来设置html字体的大小

iphone6 100px  x =( document.documentElement.clientWidth / 750) * 100 + 'px'

230px 2.3rem

 (function(doc, win) {
      var docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
          recalc = function() {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              if (clientWidth > 540) {
                  clientWidth = 540;
              }
              docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          }; //以iPhone6为基准  body 100px rem=size/100 红包页面以iphone6为基准

      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);