H5移动端rem布局方案实现

·  阅读 906

项目入口文件,一般是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;
}
复制代码

写的比较粗糙,欢迎批评指正 😎

分类:
阅读
标签:
分类:
阅读
标签:
收藏成功!
已添加到「」, 点击更改