淘宝适配源码解析

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  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
  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))
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1

(var docEl = document.documentElement 为获取HTML文档的整个文档元素,var dpr = window.devicePixelRatio || 1 为获取设备像素比例,若像素比例为0则以1代替)
function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize) 
    }
  }
  setBodyFontSize();
 (以上部分为设置字体大小,document.body.style.fontSize = (12 * dpr) + 'px' ,设置12*设备像素比例为字体大小,这样字体就可以自适应大小,先判断body是否存在,存在则设置大小,不存在则监听DOM加载完后再递归调用此方法)
 function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()
(设置rem的自适应大小,docEl,clientWidth获取设备可视区域的宽度,使rem根据设备的宽度来设置其大小)
 window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
这段代码则是通过监听事件来设置rem的大小
以上自己简单对淘宝适配源码的理解,有不足或者有误的地方望提出。
posted on 2017-10-07 15:31  一曲笙箫  阅读(677)  评论(0)    收藏  举报