- 最近在项目中需要将一个全为px单位的css文件转换为rem单位的文件。
- 写了个函数来互相转化css文件中各种单位
- 直接上代码
/**
* css单位倍数转换
* @text:css字符串
* @time:转后倍数(0.1 10)
* @unit:单位
* @toUnit:转为什么单位(非必传,不传为原单位)*/
function zoomUnit(text, times, unit, toUnit) {
//匹配所有这个单位
var unitRe = new RegExp("\\s*(\\d+)*(\\.)*(\\d+)" + unit, "img");
//转化后单位
var tranUnit = toUnit || unit;
//匹配
return text.replace(unitRe, function (x) {
var result = x.trim().replace(unit, "");
result = parseInt((+result) * 10000, 10) * times / 10000;
return result + tranUnit;
});
}
调用举例:px转rem
var cssText = `
div{
position: relative;
float: left;
background: #2f3136;
margin: 0 6px 0 9px;
padding:0 0 9px 10px;
width: 120px;
height: 36px;
line-height: 36px;
border-radius: 40px;
}
`
var result = zoomUnit(cssText,0.1,'px','rem');
console.log(result)
div{
position: relative;
float: left;
background: #2f3136;
margin: 0 0.6rem 0 0.9rem ;
padding:0 0 0.9rem 1rem ;
width: 12rem ;
height: 3.6rem ;
line-height: 3.6rem ;
border-radius: 4rem ;
}
rem转px
var cssText = `
div {
position: relative;
float: left;
background: #2f3136;
margin: 0 .6rem 0 .9rem;
padding: 0 0 0.9rem 1rem;
width: 12rem;
height: .6rem;
line-height: 3.6rem;
border-radius: 4rem;
}
`
var result = zoomUnit(cssText,100,'rem','px');
console.log(result);
div {
position: relative;
float: left;
background: #2f3136;
margin: 0 60px 0 90px ;
padding: 0 0 90px 100px ;
width: 1200px ;
height: 60px ;
line-height: 360px ;
border-radius: 400px ;
}
网友评论