首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WeUI在rem项目中的一种适配方法

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

作者头像
江米小枣
发布2020-06-15 15:10:58
1.2K0
发布2020-06-15 15:10:58
举报
文章被收录于专栏:云前端云前端

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*/`;
       }
     }
   }
}

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2017-08-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 云前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 直接手动修正:
  • 更省事一些的解决办法:
  • 在webpack中的实现方式:
    • a. 使用 postcss-px2rem 插件
      • b. 使用 webpack2-replace-loader 插件
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档