px和rem的换算与设置

一般所有浏览器的html根元素font-size:16px
1rem = 16px
所以所有px值都基于它来换算
设计稿px/换算的rem = 16px / 1 ===> 换算的rem= 设计稿px/16px

一般我们拿到的移动端设计稿是基于iphone6的
所以一般以这个确定的屏幕做参考
iphone6的屏幕宽度为375px
所以设置基准rem = 375 /10 =37.5
为啥/10，这个无所谓，只是一个自定义规定，为了让根px不要那么大

除了设置html根元素上的font-size之外，还要配合flexible.js使用
什么是flexible.js？看下源码

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

参考：http://dwbbb.com/blog/flexible/
https://www.jianshu.com/p/3a07024963d9
其实flexible.js的主要作用是：
1、为html添加data-dpr属性和style属性，style添加font-size作为1rem的基准值。
2、改写meta标签，根据dpr设置设备的缩放比。