设置根节点font-size实现rem适配移动端设备

适配前先搞清楚几个像素的概念
        像素概念：
        1)物理像素：显示器上最小的物理显示单位
        2)设备独立像素（也叫逻辑像素）：虚拟概念，一个可以由程序使用的最小虚拟像素点（css像素）
        3)设备像素比：也叫dpr，可以通过window.devicePixelRatio获取。
          设备像素比 = 物理像素 / 设备独立像素

        以iphone6来说,
        物理像素分辨率: 750 * 1334     (值越大屏幕越清晰)
        设备独立像素分辨率 : 375 * 667  (值越大手机屏幕越大，与屏幕直观尺寸有关)
        设备像素比: 2

适配原则：对移动端320-768进行适配，超过768采用768原则.小于320采用320原则。

当设备宽度>768(iPad尺寸),根节点统一使用102.4px
当设备宽度<320(一般手机最小尺寸)，根节点统一使用42.7px

(function(d){
  const html = d.getElementsByTagName('html')[0];  // html节点
  let resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
  function getScale() {
    let width = html.clientWidth, // 设备宽度
        dpr = window.devicePixelRatio, // 像素比
        scale = Number(width/750).toFixed(4),  //  320：0.427   768：1.024
        lastScale = scale>1.024?1.024:(scale<0.427?0.427:scale);
    return lastScale;
  }
  let changePage = function(e) {
    let lastScale = getScale();
    if ( html.clientWidth <= 768 ) {
      html.setAttribute('style','font-size:'+(lastScale*100).toFixed(3)+'px');
    } else {
      html.setAttribute('style','')
    }
  }
  changePage();
  if (!document.addEventListener) return;
  window.addEventListener(resizeEvent, changePage, false);  // 监听设备屏幕旋转/页面resize
  document.addEventListener('DOMContentLoaded', changePage, false); // 监听刷新页面
})(document);