rem动态适配

(function (doc, win) {
  var docEl = doc.documentElement
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
  var recalc = function () {
    var clientWidth = docEl.clientWidth
    if (!clientWidth) return
    docEl.style.fontSize = 100*clientWidth/750 + 'px'
  }
  if (!doc.addEventListener) return
  win.addEventListener(resizeEvt, recalc, false)
  doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window

这里的750px就是设计稿的宽度。在此设计稿下换算如下。
如果设计稿中元素为20px，则转换为rem 为0.2rem元素会根据屏幕的尺寸放大或者缩小原理： 浏览器默认的1rem =16px, 手机上则根据dpi的不同，这个值有所改变 1rem有多少个px这个是受到最外层元素的font-size影响的。 设置html的fontsize值，设置好后，内部元素的1rem值会被这个值改变。 1. font-size=“设备宽度/设计稿宽度” 将这个值作为1rem的px个数，像素不能太小，就x100. 2. 那么设计稿中元素为25px值时候，在设备上就是25rem,然后在除以100，就是0.25rem