H5移動端rem佈局方案實現

項目入口文件，通常是index.html，加上以下代碼：

function implementRem(obj) {
    var window = obj.window || this,
    width = obj.width || 720,
    docEl = window.document.documentElement,
    dpr = window.devicePixelRatio || 1,
    resizeEvt = 'resize',
    resizeCall = (function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) {
            docEl.style.fontSize = 100 + 'px';
        } else {
            docEl.style.fontSize = 100 * (clientWidth / width) + 'px';
        }
          return arguments.callee;
    })();

    dpr = dpr >= 3 ? 3 : dpr >= 2 ? 2 : 1;
    docEl.setAttribute('data-dpr', dpr);
    window.addEventListener && window.addEventListener(resizeEvt, resizeCall, false);
}
implementRem({
    window: this,
    width: 720
})
複製代碼

傳window的做用是，服務端渲染的話，node層是拿不到window對象的，防止js報錯

css或者less文件，書寫形式以下：

.zLog__title {
  margin: 0.7rem auto 0.47rem;
  font-size: 0;
  text-indent: 0.02rem;
  width: 5.64rem;
  height: 0.48rem;
  background-image: none;
  position: relative;
}
複製代碼

若是以爲css裏面用rem佈局開發很不習慣，或者公司ui設計稿都是基於藍湖的話，用原來的px佈局可能效率會更高一些，能夠在項目裏添加postcss-px2rem插件

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-px2rem')({ remUnit: 100 }) // 換算的基數
        ]
      }
    }
}
複製代碼

css或者less文件，書寫形式以下

.zLog__title {
    margin: 70px auto 47px;
    font-size: 0;
    text-indent: 2px;
    width: 564px;
    height: 46px;
    background-image: none;
    position: relative;
}
複製代碼

邊框border不少狀況下都是1px，1px通過換算後，部分機型的border就達不到1px,就看不到border了，這個時候須要針對1px的css行尾 加上 no ，禁止rem的轉換

.grade-item {
    width: 46.77%;
    height: 80px;
    background: rgba(255,255,255,1);
    border: 1px solid #FF4700; /*no*/
    border-radius: 10px;
    font-size: 28px;
    color: #FF4700;
}
複製代碼

寫的比較粗糙，歡迎批評指正 😎