淘寶flexible.js+rem適配移動端

前提：設計稿爲750px

一、下載flexible.js：（它的原理是將當前設備寬度劃分爲10等份）

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

二、設置meta標籤

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

三、引入flexible.js文件

<script src='js/flexible.js'></script>

四、初始化style

<style>
      /* 若是屏幕超過了750px，那麼咱們就就按照750px設計稿來走，不會讓頁面超過750px ,使用媒體查詢來設置*/
      @media screen and (min-width: 750px) {
        html {
          font-size: 75px !important;
        }
      }
      body {
        min-width: 320px;
        max-width: 750px;
       /* flexible.js把設計稿750px進行10等分，因此html文字大小設置爲75px(750px/ 10)，頁面元素rem值:頁面元素的px值/ 75(750px/75)*/
        width: 10rem;
        margin: 0 auto;
      }
</style>

五、插件：c***em，默認的Root Font Size是16px，此時須要改成75