推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：504
-
2020-05-12 浏览：500
微信小程序开发-rem转换rpx小工具
发布时间:2020-10-29对样式进行格式化，然后根据 “rem” 进行拆分，这样就会拆分成一个数组 [str1,str2,str3...,str6],
除了最后一个元素，前边的元素都会以 “rem” 样式的数值结尾，
然后在对数组中的元素字符串进行再次根据 “：” 进行拆分，这样就把原rem样式的数字给提取出来了，然后就根据规则转换成rpx的数值，重新组合就好了。
css格式化工具：https://tool.lu/css/
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div#newCss{
border:1px solid #999;
width:504px;
height:140px;
}
</style>
</head>
<body>
<script type="text/javascript">
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
}
</script>
<h4>rem样式</h4>
<textarea id="css" cols="60" rows="10"></textarea>
<br />
<input type="button" value="rem转换rpx" onclick="rem2rpx()" />
<h4>转换后的样式</h4>
<div id="newCss"></div>
- 上一篇：微信小程序开发——设置默认图片、错误加载图片
- 下一篇：微信小程序入门-指南针
