可伸缩布局方案：flexible.js 移动端自适应方案

flexible.js 的使用方式：

github地址：https://github.com/amfe/lib-flexible
官方文档地址：https://github.com/amfe/article/issues/17

//这个是立即执行函数：即可以立即执行，无需调用的函数。  立即执行函数是独立的作用域，里面的变量都是局部的，不会有命名冲突
//立即执行函数写法：(function (){})()  或者 (function(){}())
(function flexible (window, document) {
  //获取html的根元素
  var docEl = document.documentElement
  // dpr 物理像素比
  var dpr = window.devicePixelRatio || 1

  // adjust body font size  设置body的字体大小
  function setBodyFontSize () {
    //如果页面中有body这个元素，就设置body的字体大小
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      //如果页面中没有有body这个元素，就等页面主要的DOM元素加载完，再设置body的字体大小
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10  设置html元素的字体大小
  function setRemUnit () {
    //rem就是把页面分成10份，每一份就是一个rem
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize: 当页面尺寸大小变化时，重新设置rem的大小
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    // 当e.persisted返回true时(即这个页面是从缓存取过来的)，重新设置rem的大小
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports: 解决有些移动端浏览器不支持0.5像素的写法
  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))