您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

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

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-05-07 14:54热度:

实现原理:

对样式进行格式化,然后根据 “rem” 进行拆分,这样就会拆分成一个数组 [str1,str2,str3...,str6],

除了最后一个元素,前边的元素都会以 “rem” 样式的数值结尾,

然后在对数组中的元素字符串进行再次根据 “:” 进行拆分,这样就把原rem样式的数字给提取出来了,然后就根据规则转换成rpx的数值,重新组合就好了。

css格式化工具:https://tool.lu/css/

 

源码:

 

				
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. div#newCss{
  8. border:1px solid #999;
  9. width:504px;
  10. height:140px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script type="text/javascript">
  16. function rem2rpx() {
  17. var oldCss = document.getElementById("css").value.trim(); //".similar_recommend .title{margin:.3rem 0 0;padding-top:.4rem;color:#666;font-size:.28rem;}"
  18. //对原样式根据rem进行拆分成数组,这样除了最后一个元素,数组前边的几个元素都是以原rem样式数值结尾
  19. //拆分后的格式:[".similar_recommend{background:#fff;border-radius:.1", ";height:7.4", ";margin-top:-.3", "}"]
  20. var newCssArr = oldCss.split("rem")
  21. var newCss = "" //转换后新的样式变量
  22. for(var i in newCssArr) {
  23. if(i < newCssArr.length - 1) {
  24. //非最后一个元素,对字符串按照:再次拆分,把rem样式的数值分离出来进行转换
  25. var str = newCssArr[i]
  26. var idx = str.lastIndexOf(':')
  27. var prevStr = str.substring(0, idx + 1)
  28. var nextStr = ""//nextStr格式为 -.3 , -3 , 3 , .3
  29. if(str.indexOf('-.')>-1){
  30. //nextStr格式为-.3rem或-3rem
  31. nextStr = str.substring(str.indexOf(':-')+2, str.length)
  32. //nextStr格式为.3rem或3rem
  33. if(nextStr.indexOf('.')>-1){
  34. nextStr ="0"+ nextStr
  35. }
  36. nextStr = "-"+parseInt(nextStr * 100) + "rpx"
  37. }else{
  38. nextStr = str.substring(idx + 1, str.length)
  39. nextStr = nextStr.indexOf('.') > -1 ? "0" + nextStr : nextStr
  40. nextStr = parseInt(nextStr * 100) + "rpx"
  41. }
  42.  
  43. //重组数组内的样式字符串
  44. newCss += prevStr + "" + nextStr
  45. }else{
  46. //追加最后一个数组元素
  47. newCss+=newCssArr[i]
  48. }
  49. }
  50. document.getElementById("newCss").innerHTML=newCss
  51. }
  52. </script>
  53. <h4>rem样式</h4>
  54. <textarea id="css" cols="60" rows="10"></textarea>
  55. <br />
  56. <input type="button" value="rem转换rpx" onclick="rem2rpx()" />
  57. <h4>转换后的样式</h4>
  58. <div id="newCss"></div>
  59. </body>
  60. </html>