flexible.js源码解析

(function flexible (window, document) {
  // 获取页面root根元素 html
  // 跟 document.body 获取的是 页面的 body 元素
  var docEl = document.documentElement
  // window.devicePixelRatio设备像素比
  // 默认为 1
  /**
   * [dpr description]
   * @type {[type]}
   * 设备像素比(device pixel ratio)
   * 设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。
   * 它的值可以按下面的公式计算得到：
   * 设备像素比 ＝ 设备物理像素 / 设备独立像素
   * 设备物理像素是指设备的实际像素
   * 设备独立像素就是指平常我们写 CSS 样式的 px 像素
   * 计算公式： 1px = (dpr)^2dp;
   */
  /**
   * [dpr description]
   * @type {[type]}
   * 基于rem的原理，我们要做的就是: 
   * 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。
   * 这里我们提取了一个公式(rem表示基准值)
   * rem = document.documentElement.clientWidth * dpr / 10
   */
  /**
   * [dpr description]
   * @type {[type]}
   * 乘以dpr，是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有，dpr=1),。
   * 除以10，是为了取整，方便计算(理论上可以是任何值)
   * 所以就像下面这样，html的font-size可能会：
   * iphone3gs: 320px / 10 = 32px
   * iphone4/5: 320px * 2 / 10 = 64px
   * iphone6: 375px * 2 / 10 = 75px
   * 对于动态改变根节点html的font-size，我们可以通过css做，也