背景
我们在进行h5开发时，通常使用的设计稿是750px（考虑retina），我们会直接根据设计稿的尺寸去开发，然后进行适配（常用的有淘宝的flexible方案以及近期流行的vw适配方案）。但有时，我们又想直接使用现有移动端框架的一些组件（如简洁大方的weui）。weui作为基础组件，大多数是使用px为单位的，比如直接在自己的项目中用upload组件，看起来就小了一号。
image.png
这是由于<meta>中的 viewport已经被相关js改成 640 或 750 之类的值，WeUI中的 13px 等字号或尺寸就显得捉襟见肘了。
解决方案
1. 最笨的
要解决这个问题，最直接的方式就是把框架里相关代码拷贝过来，自己默默地覆盖样式，这样做的好处是可以精确控制像素，缺点自然是浪费生命~~
2. 与适配方案相关的
如果你使用rem的适配方案，有现成的工具可以将px转化成rem（如，px2rem），或者在webpack工程中使用postcss-px2rem插件，并在处理css的相关rules中添加
{
loader: 'postcss-loader',
options: {
plugins: [
px2rem({
remUnit: 375 / 20,
remPrecision: 5
})
]
}
}
需要注意的是
- remPrecision指的是生成的rem数值精度，避免过长
- 而 remUnit 中用 375，是基于 iphone6 的尺寸做一个基准，计算出来的尺寸基本在各自手机型号中都可以接受
- 20 则参考了小程序中的标准，这个值其实也可以自定义，和相关rem辅助工具中的设置一致即可
该方案参考自《WeUI在rem项目中的一种适配方法》 一文，该文还提出“使用 webpack2-replace-loader 插件”的方式，但本人测试后无法编译通过，如果有同学成功了，请多多指教~
3. 字符串替换方式，修改原来的px（大概2倍大小比较合适）
这个方式的思路是找出框架中所有以px为单位的数字，乘以2。借用node文件处理，按行读取文件，对每行文件进行正则匹配，并替换所有以px结尾的数值。代码如下：
let output = ''; // 最终输出的结果
const readline = require('readline');
const path = require('path');
const fs = require('fs');
let filepath = path.join(__dirname, "weui.css"); // 需要转化的css文件
let input = fs.createReadStream(filepath);
const rl = readline.createInterface({
input: input
});
rl.on('line', (line) => {
var exp = new RegExp(/\b(\d+(\.\d+)?)px\b/g); // 获取所有以px结尾的数值
var out = line.replace(exp, function ($0, $1) {
return $1 * 2 + 'px';
}); // 将匹配到的数值进行计算
output += `${out}\n`;
});
rl.on('close', (line) => {
fs.writeFile(__dirname + '/output.css', output, function (err) {
if (err) {
throw err;
}
console.log('已保存!');
});
console.log("读取完毕！");
});
将输出的文件引入项目，可以看到刚才的上传组件变成正常大小啦
image.png
踩过的几个坑：
- 一开始没想到replace函数可以直接用替换函数，还在那里自己拼字符串，如下：
var result = exp.exec(line);
var out = line;
if (result !== null) {
out = line.substring(0, result.index) + parseInt(result[1])*2 + line.substring(result.index+result[1].length);
}
但这也只能解决一行只出现一次px的情况，如果有多个匹配串，拼起来太痛苦了，就想着px转rem的工具肯定已经解决了这个问题，所以屁颠屁颠跑去参考了px2rem的源码（思路!!!），发现replace可以这么用，马上解决了我的痛点，开心！
- 本来想每行处理的时候顺便写入到文件，但写入文件的过程是异步的，所以生成出来的文件会错位。一般css文件都不会很大，因此我直接把结果缓存起来，最后一起写入文件。毕竟读写文件的开销比较大。
本人初入移动端，希望各位多多吐槽，一起讨论解决问题的思路。
网友评论