flexible.js 原理解析(看了不会忘)

写关于原理解析的文章很多，每次看完理解了，后面又忘记了，这次自己整理一下，用通俗形象的话梳理一下。

flexible.js用来处理移动端各种设备兼容问题。也就是怎么解决移动端尺寸众多的问题，我们的设计稿是固定，怎么办，如果设计稿是弹性的可以随意缩放该多好，想想，有办法了，就像本来你在一张大的纸上面了一副画，现在让你在小的纸上在画一次要怎么画，就是所有东西都等比例画小，如果要画到更大的纸上也是一个道理，等比画大，对不对。

现在我们把设计稿分成10等份，设计稿 A = W/10，我们把设备可视区域也就是我们的各种移动端设备的这个画布也分成10份，并赋值给根元素的fontSize，我们都知道rem是根据根元素字体大小计算的，所以我们的1rem也就是设备可视区域/10，现在设计稿上有一块区域宽B，那它是不是等比放到设备可视区域的宽度为 B/A rem。再啰嗦一下，B在设计稿上占B/A份，那在设备可视区域上也要占B/A份对不对，所以宽是B/A rem。这就是flexible.js能实现设备兼容的原理。下面看代码

// 首先是一个立即执行函数，执行时传入的参数是window和document
(function flexible (window, document) {
  var docEl = document.documentElement  // 返回文档的root元素
  var dpr = window.devicePixelRatio || 1 // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值

  // adjust body font size 设置默认字体大小，默认的字体大小继承自body
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports  检测是否支持0.5像素，解决1px在高清屏多像素问题，需要css的配合。
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))