WeUI在rem项目中的一种适配方法

阅读 3181
收藏 22
2017-08-10
原文链接:mp.weixin.qq.com

WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素

以上是官方团队对WeUI的介绍,作为一个使用频率非常高的UI库,官方也给其提供了weui-wxssweui.jsreact-weui等配套工具来适应微信小程序、普通h5页面、react项目等日常开发

但在移动页面开发的过程中,另一个高频面临的问题[rem适配]会和WeUI八字不合;由于WeUI中的单位大都是由px定义,如果直接用在项目中,大概就成了以下的画风:

这是由于<meta>中的 viewport已经被相关js改成 640 或 750 之类的值,WeUI中的 13px 等字号或尺寸就显得捉襟见肘了;

直接手动修正:

一个笨办法就是“逢山开道、遇水架桥”,也就是。。。对使用到的WeUI组件一个个的覆盖其样式,比如:

/* weui-rem-reset.less */

.weui_cells {
    .px2rem(10px, margin-top);
    line-height: 1.41176471;
    .px2rem(34px);
    &::after,
    &::before {
        .ab1px();
    }
    &::before {
        .px2rem(1px, border-top-width);
        border-top-color: #e9ecec;
    }
    &::after {
        .px2rem(1px, border-bottom-width);
        border-bottom-color: #e9ecec;
    }
}
.weui_cell {
    .px2rem_2(28px,30px,padding);
    &::before {
        .ab1px();
        .px2rem(1px, border-top-width);
            border-top-color: #f0f0f0;
        left: 0;
    }
}

...

更省事一些的解决办法:

官方团队对于这个问题的回应和建议是这样的:

好像比较简单粗暴ㄟ( ▔, ▔ )ㄏ,不过也是比较适用的办法了

在webpack中的实现方式:

以webpack项目为例,我们按照以上思路,可以用几种插件实现,这里举两种实现方式的栗子:

a. 使用 postcss-px2rem 插件

引入安装好的包:

const px2rem = require('postcss-px2rem');

在处理 css 的相关 rules 中添加:

{
    loader: 'postcss-loader',
    options: {
      plugins: [
        px2rem({
          remUnit: 375 / 20,
          remPrecision: 5
        })
      ]
    }
}

需要注意的是

  • remPrecision指的是生成的rem数值精度,避免过长

  • 而 remUnit 中用 375,是基于 iphone6 的尺寸做一个基准,计算出来的尺寸基本在各自手机型号中都可以接受

  • 20 则参考了小程序中的标准,这个值其实也可以自定义,和相关rem辅助工具中的设置一致即可

b. 使用 webpack2-replace-loader 插件

按照第一种方法的思路,直接用文本替换的方法也可以自行实现,并且拥有更多的自由度:

{
    loader: 'webpack2-replace-loader',
    options: {
      replace: {
        '([0-9\\.]+)px': function(match, p1, office, string) {
          let vlu = parseInt(p1);
          
          //忽略小于等于1px的尺寸
          if (vlu<=1) return `${p1}px`;
          
          vlu = vlu / (375 / 20);
          vlu = vlu.toPrecision(5);
          return `${ vlu }rem/*${ p1 }px*/`;
        }
      }
    }
}

至此,再结合具体的设计稿进行微调,即可正常使用:

-------------------------------------

长按二维码或搜索 fewelife 关注我们哦

评论