各个大厂适用的移动端rem适配方案--flexible.js

移动端css文件中，body元素经常会设置min-width，max-width，width。

而有的网页只设置了min-width：320px，width：15rem。实际是因为他们没有引入flexible.js，15rem已是最大宽度750px(前提是他们的设计稿宽度是750px，且将页面划分15等份)

引入flexible.js文件除了设置min-width，width，还会设置max-width。因为docEl.clientWidth是以浏览器的可视区域而定，即pc端浏览器打开页面就会以pc端宽度定字体大小

// 立即执行函数

(function flexible (window, document) {

  // 获取页面元素

  var docEl = document.documentElement

  // 物理像素比，pc端为1

  var dpr = window.devicePixelRatio || 1

  // adjust body font size

  function setBodyFontSize () {

    // 如果有body元素，为其设置字体大小

    if (document.body) {

      document.body.style.fontSize = (12 * dpr) + 'px'

    }

    else {

      // 如果没有就等DOM元素加载完毕调用setBodyFontSize ()

      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 页面尺寸发生改变时，重新调用setRemUnit ()

  window.addEventListener('resize', setRemUnit)

  // pageshow相当于load事件，但是pageshow会发生在load后。火狐有往返缓存，后退不会刷新页面，用pageshow就可以解决这个问题

  window.addEventListener('pageshow', function (e) {

    // 如果这个页面是缓存回来的页面也需要重新调用setRemUnit()

    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))