实现原理：

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

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

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

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

源码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script type="text/javascript" src="../layui/jquery-3.2.1.min.js"></script>

        <style>

            div#newCss {

                border: 1px solid #999;

                width: 504px;

                height: 140px;

            }

        </style>

    </head>

    <body>

        <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>

        <input id="aaa">

        <input id="bbb">

        <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="1px .2"的情况

                            var index = nextStr.indexOf(' ')

                            if(index >= 0) {

                                let str1 = nextStr.substring(0, index)

                                let str2 = nextStr.substring(index + 1, nextStr.length)

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

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

                                nextStr = str1 + ' ' + str2

                            } else {

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

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

                            }

                        }

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

                        newCss += prevStr + "" + nextStr

                    } else {

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

                        newCss += newCssArr[i]

                    }

                }

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

            }

            $("#bbb").keydown(function(event) {

                if(event.which == 13) {

                    console.log("ok")

                }

            });

        </script>

    </body>

</html>

微信小程序开发-rem转换rpx小工具的更多相关文章

  1. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  2. 微信小程序--关于加快小程序开发的几个小建议

    加快小程序开发的几个小建议 1.使用 app.json创建页面 ​ 按照我们平常的开发习惯,创建一个新的页面,一般都会先创建文件夹,再创建对应page的形式,创建完成后,app.json中会自动注册该 ...

  3. 微信小程序开发公测，小程序账号申请办法攻略

    11月3号晚上 10 点,微信公众平台发布公告,宣布微信小程序正式开放公测.此次小程序公测允许开发者将产品提交至微信公众平台审核,但是暂时不支持发布,也就是说普通消费者若想体验小程序,还需要等待一段时 ...

  4. 微信小程序开发——前端如何区分小程序运行环境

    前言: 之前用vue做h5项目,对于接口请求,都是根据前端访问域名来判断运行环境,然后自动适配对应的服务器地址的.这样的好处就是在开发.测试及发布上线全程都不需要手动去改接口请求地址,只要提前配置好就 ...

  5. 微信小程序开发——打开另一个小程序

    微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... &quo ...

  6. 微信小程序开发入门学习(2):小程序的布局

    概述 小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已). 水平排列 默认是从左向右水平依次放置组件,从上到下依次放置组件. 任何可视组件都需要使用样 ...

  7. 支付宝小程序开发——如何获取支付宝小程序页面的https链接

    前边介绍过通过配置支付宝Scheme协议alipays://来实现h5到小程序的跳转,其实还可以获取小程序页面的https格式链接,虽然支付宝官方并没有直接提供方案,但是通过小程序后台的“码管理”给页 ...

  8. 微信小程序开发-概述

    微信小程序开发-概述 一.小程序申请&APPID 登录微信平台申请成为小程序开发者,小程序不可直接使用服务号或订阅号的AppID,需要登录微信公众平台管理后台,在网站的"设置&quo ...

  9. 微信小程序开发系列一：微信小程序的申请和开发环境的搭建

    我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...

随机推荐

  1. 死无对证：tomcat7 + 中文cookie + goLang

    查了下资料,很多人遇到这个问题,但是goLang使用得相对少 java.lang.IllegalArgumentException: Control character in cookie value ...

  2. Project2016下载安装密钥激活教程破解

    project2016发布增加了许多功能.Microsoft Office 2016 官方正式版发布!这是微软发布的全新办公软件套件,相比现有Office 2013的变化也不是很大,界面和功能都只是微 ...

  3. php计算程序运行时间

    这里介绍一下 microtime() 这个函数,microtime() 用的不多,但是不能不知道这个函数,它是返回当前 Unix 时间戳和微秒数.例如:echo microtime(); 会返回:0. ...

  4. 机器学习入门-数值特征-数据四分位特征 1.quantile(用于求给定分数位的数值) 2.plt.axvline(用于画出竖线) 3.pd.pcut(对特征进行分位数切分，生成新的特征)

    函数说明: 1.  .quantile(cut_list) 对DataFrame类型直接使用,用于求出给定列表中分数的数值,这里用来求出4分位出的数值 2.  plt.axvline()  # 用于画 ...

  5. ABAP-串口通信-道闸设备

    最近SAP系统需要与道闸设备集成,通过串口通讯模式控制道闸栏杆升降,在此将开发过程中的思路及问题点做个备注. 一.相关设备 道闸设备型号:富士智能FJC-D618 串口模块:康耐德 C2000-A1- ...

  6. redis 学习笔记2(集群之哨兵模式的使用)

    redis3.0之前已经有了哨兵模式,3.0之后有了cluster(分片集群),官方不推荐使用!!主要原因是分片后单节点故障后需要实现手动分槽... 集群较为成熟的解决方案codis,公司使用的是哨兵 ...

  7. 查看Linux物理CPU个数

    查看内核版本 lsb_release -a 查看物理CPU个数.核数.逻辑CPU个数 (1)具有相同core id的CPU是同一个core的超线程. (2)具有相同physical id的CPU是同一 ...

  8. Delphi在Listview中加入Edit控件

    原帖 : http://www.cnblogs.com/hssbsw/archive/2012/06/03/2533092.html Listview是一个非常有用的控件,我们常常将大量的数据(如数据 ...

  9. canvas入门笔记

    1.Canvas的使用注意  A.要在页面中添加一对canvas标记,默认占300*150的区域  B.我们可以通过html属性‘width’,‘height’来设置canvas的宽高,不可以通过cs ...

  10. oracle数据表中的中文变问号

    先查询一下select userenv('language') from dual;查看oracle字符集, $ sqlplus /nolog SQL> connect sys/oracle a ...