核心原理

简单的一句概括就是： flexible.js帮我们计算出1rem 等于多少px。

怎么计算的？

很简单，就是1rem = 屏幕宽度的1/10
flexible核心代码

var docEl = document.documentElement  // 返回文档的root元素,即html
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'

我们知道rem的大小是根据html节点的font-size的相对值

例如，iphone 6的屏幕宽度为375px，因此1rem === 37.5px。

计算rem干嘛？

那帮我们计算出rem的值有什么鬼用吗？

确实，如果只是单纯的计算出rem的值并没什么用。发挥它的用处是当我们根据设计稿来转化成页面时需要用到。

举个例子，现在有两个手机，一个手机的屏幕宽度是375px，一个是750px，设计稿给我们的宽度是375px，那我们按照设计稿的设计在375px的手机上刚好完美匹配，但是却会发现在750px的手机上页面只有一半，空白了一半。

这就是我们需要解决的问题，即怎么解决移动端尺寸众多的问题，我们的设计稿是固定，怎么办？

等比画饼

想想，有办法了，就像本来你在一张大的纸上面了一饼，现在让你在小的纸上在画一次要怎么画，就是所有东西都等比例画小，如果要画到更大的纸上也是一个道理，等比画大，对不对。

现在我们把设计稿分成10等份，设计稿 A = W/10，我们把设备可视区域也就是我们的各种移动端设备的这个画布也分成10份，并赋值给根元素的fontSize，我们都知道rem是根据根元素字体大小计算的，所以我们的1rem也就是设备可视区域/10，现在设计稿上有一块区域宽B，那它是不是等比放到设备可视区域的宽度为 B/A rem。

就是flexible.js能实现设备兼容的原理。下面看代码

// 首先是一个立即执行函数，执行时传入的参数是window和document
(function flexible (window, document) {
  var docEl = document.documentElement  // 返回文档的root元素
  var dpr = window.devicePixelRatio || 1 // 获取设备的dpr，即当前设置下物理像素与虚拟像素的比值

  // adjust body font size 设置默认字体大小，默认的字体大小继承自body
  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  检测是否支持0.5像素，解决1px在高清屏多像素问题，需要css的配合。
  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))

这就是flexible.js的源码，超级简单吧。

现在已经实现了将屏幕分为10等份，也就是1rem。

将设计稿分成10等份

根据我们上面画饼的方案，现在也要把设计稿转化为10等分才行。

我看了下我们项目的实现是用到了postcss-pxtorem插件来实现的

因为设计稿给我们的是px单位的，所以我们在开发的时候只能写px，然后这就需要postcss-pxtorem来帮我们将我们写的px转化为rem了。

安装完postcss-pxtorem之后的配合非常简单，只要在.postcssrc.js文件配置如下就好了

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75,
    }
  }
}

rootValue：75 为啥是75呢，这是因为我们的设计稿的宽度是750px，十分之一就是75px

如果你们的设计稿是375px的，就需要将值改写成37.5