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) {
	var reg = /((-?\.?\d+)(\.\d+)?)rem/g;

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

上面代碼裏的32爲對應寬度爲320px的設計稿，pxToRem是一個scss裏用於計算rem的函數：

如下所示：（$baseRem，如設計稿爲750px，則$baseRem爲75）

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

後續將會做成一個在線小工具，敬請期待。