cssrem转换工具_微信小程序开发-rem转换rpx小工具

div#newCss{

border:1px solid #999;

width:504px;

height:140px;

}

function rem2rpx() {

var oldCss = document.getElementById("css").value.trim(); //".similar_recommend .title{margin:.3rem 0 0;padding-top:.4rem;color:#666;font-size:.28rem;}"

//对原样式根据rem进行拆分成数组，这样除了最后一个元素，数组前边的几个元素都是以原rem样式数值结尾

//拆分后的格式：[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"]

var newCssArr = oldCss.split("rem")

var newCss = "" //转换后新的样式变量

for(var i in newCssArr) {

if(i < newCssArr.length - 1) {

//非最后一个元素，对字符串按照:再次拆分，把rem样式的数值分离出来进行转换

var str = newCssArr[i]

var idx = str.lastIndexOf(':')

var prevStr = str.substring(0, idx + 1)

var nextStr = ""//nextStr格式为 -.3 , -3 , 3 , .3

if(str.indexOf('-.')>-1){

//nextStr格式为-.3rem或-3rem

nextStr = str.substring(str.indexOf(':-')+2, str.length)

//nextStr格式为.3rem或3rem

if(nextStr.indexOf('.')>-1){

nextStr ="0"+ nextStr

}

nextStr = "-"+parseInt(nextStr * 100) + "rpx"

}else{

nextStr = str.substring(idx + 1, str.length)

nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr

nextStr = parseInt(nextStr * 100) + "rpx"

}

//重组数组内的样式字符串

newCss += prevStr + "" + nextStr

}else{

//追加最后一个数组元素

newCss+=newCssArr[i]

}

}

document.getElementById("newCss").innerHTML=newCss

}

rem样式

转换后的样式