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组件一个个的覆盖其样式,比如:
代码语言:javascript复制/* 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 插件
引入安装好的包:
代码语言:javascript复制const px2rem = require('postcss-px2rem');
在处理 css 的相关 rules 中添加:
代码语言:javascript复制{
loader: 'postcss-loader',
options: {
plugins: [
px2rem({
remUnit: 375 / 20,
remPrecision: 5
})
]
}
}
需要注意的是
- remPrecision指的是生成的rem数值精度,避免过长
- 而 remUnit 中用 375,是基于 iphone6 的尺寸做一个基准,计算出来的尺寸基本在各自手机型号中都可以接受
- 20 则参考了小程序中的标准,这个值其实也可以自定义,和相关rem辅助工具中的设置一致即可
b. 使用 webpack2-replace-loader 插件
按照第一种方法的思路,直接用文本替换的方法也可以自行实现,并且拥有更多的自由度:
代码语言:javascript复制{
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*/`;
}
}
}
}
至此,再结合具体的设计稿进行微调,即可正常使用: