WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素
以上是官方团队对WeUI的介绍，作为一个使用频率非常高的UI库，官方也给其提供了weui-wxss、 weui.js、react-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 关注我们哦
