09/19
2018
CSS 的常用长度单位有 px、em、rem、pt 等。今天我遇到一个情况，有两个网站都使用了 rem 作为单位，但是根元素（html）的字号并不相同，需要进行转换。
移植页面的根元素字号是 20px，CSS 规则如： height: 4rem; 我的根元素字号是 100px，需要除以 5，改成： height: 0.8rem;
因为需要修改的地方很多，所以我写了个正则来处理。本文的代码并不是一个通用的工具，只是提供了解决思路。
这次的情况是同一种单位之间的转换，有时候我们可能需要进行不同单位之间的转换，思路都是一样的，根据需要修改代码即可。
示例代码：
let str=`
.conta {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.bt01 {
height: 4rem;
line-height: 4rem;
background: #b50d0a;
color: #fff;
text-align: center;
font-size: 1.6rem;
}
.bt02 {
height: 5rem;
padding-top: 1rem;
line-height: 2rem;
background: #b50d0a;
color: #fff;
text-align: center;
font-size: 1.6rem;
}
`;
let reg1=/\d.*?(?=rem)/g;
str.replace(reg1,(num)=>{
console.log(num);
return num/5;
});
流程说明：
1.把需要修改的 CSS 样式包裹在模板字符串里；
2.编写正则，如示例中的正则是匹配所有 rem 前面的数字；
3.用字符串的 replace 方法，对每个匹配的值进行处理和替换。
如何拓展使用呢，比如要转换的单位不是 rem，修改正则里的 rem 即可。
如果需要进行不同单位之间的转换，那么匹配时不止要匹配数字，还要匹配单位。需要把正则里的 ?= 去掉，replace 里的处理流程也要加上单位的变化。
注意事项：
使用时需要先把 CSS 代码格式化，像上面的代码那样，一个规则一行。否则可能导致正则的匹配结果出错，下面这个就会出错：
background: #b50d0a;font-size: 1.6rem;
也可能会有其他一些小概率情况导致出错，保险起见，转换后查找一下结果里是否含有“NaN”比较好。
