rem to px转换(rem单位转换回px单位)初稿

因为某些原因，需要将rem转回px，而当初的rem相对应的设计稿大小，与现行项目不一致，需要进行转换。

比如原来的设计稿是320px，现在的设计稿是750px，显然再直接用原来的css代码是不合适的，这就涉及到转化，而一个一个手动修改累死人不说，还浪费时间，很不符合程序猿的作风~

于是想着可以使用正则来替换，下面给出测试代码及正则，方便有同类经历的童鞋使用。

我们先来看看测试css：

.test{
    font-size: .36rem;
    margin: 1rem .1rem -1rem 1.52rem;
    width: 5rem;
}

可以发现有这么几种写法：1rem，.1rem，-1rem，1.2rem。

那么我们需要使用正则匹配出rem前面的数字，正数负数都应该包含。

经过测试，相应的正则为：/((-?\.?\d+)(\.\d+)?)rem/g，

推荐两个正则在线测试网站：https://regexr.com/ 和 https://www.debuggex.com

 

下面给出转换函数：

function transform(str, baseRem) {
	var reg = /((-?\.?\d+)(\.\d+)?)rem/g;

	var newStr = str.replace(reg, function(match, pos, orginText) {
		var val = (parseFloat(pos) * baseRem).toFixed(2);
		return "pxToRem(" + val + ")";
	});
	return newStr;
}

console.log(transform(".abc{width:1.5rem}", 75));

上面代码里的32为对应宽度为320px的设计稿，pxToRem是一个scss里用于计算rem的函数：

如下所示：（$baseRem，如设计稿为750px，则$baseRem为75）

@function pxToRem($px) {
  @return $px / $baseRem * 1rem
}

后续将会做成一个在线小工具，敬请期待。