背景

新项目基于WeUI做移动端H5界面，需要做适配，采用rem适配方案。

项目中rem适配

需求也希望界面原生态轻量级一些，做十几个H5静态界面，所以考虑主要用一个UI框架(WeUI)和zepto.js。 由于是新项目，设计稿是750px宽的，我会考虑在一开始开发就直接用rem做单位。

适配设计

为了方便直接根据设计稿基准尺寸（宽度750px）取值，如设计稿中32px的字体，开发样式直接写3.2rem，所以此时根font-size:10px;（即1rem为10px）。

lib-flexible

这里我基于用的amfe/lib-flexible设置根元素font-size

上述源码可示，lib-flexible默认是1rem=viewWidth/10，如750px宽度时，根font-size为75px。

而我的目标是viewWidth为750px时，根font-size为10px，修改此处计算方式：

function setRemUnit() {
    var rem = (docEl.clientWidth * 10) / 750
    docEl.style.fontSize = rem + 'px'
}

最终效果：

接下来就需要解决WeUI里的默认尺寸，改成适配的，下图是750px宽度时的呈现 目标是需要把weui.css文件的尺寸转换成所需rem，如16px转换为3.2rem，可以考虑直接用gulp/webpack之类的打包工具插件去转换单位。我在这考虑的是后续可以根据需求随时定制适配方案，想更自由些，所以我优先下载看了一下weui框架css这块的源码，发现可以直接加插件进行转换打包。

WeUI框架px转换rem适配

1. 下载weui源码

在github上下载WeUI源码（2.5.4版本），文件目录结构如图：

2. 使用gulp-px2rem-plugin插件转换单位并打包

参考《px转rem---gulp插件》

在gulpfile.js打包时加上px2rem： 配置参数说明：

• width_design：设计稿宽度，默认值640。
• valid_num：生成rem后的小数位数，默认值4。
• pieces：将整屏切份。默认为10，相当于10rem = device-width 因为我们的目标是希望375px宽屏幕里，根font-size为5px（1rem=5px），则75 * 5 = 75rem = 375px，所以pieces为75。 最终打包，大功告成，单位转换后的weui.css用于项目中如下所示

375px宽屏幕： 412px宽屏幕：