实现原理：

对样式进行格式化，然后根据 “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. Spring Cloud （6）config 客户端配置 与GitHub通信

    1. 配置yml 1.1 1.2 1.3 2. 提交yml 到git 3.新建项目 pom 4.新建bootstrap.yml (优先权比application.yml高) 5.bootstrap.y ...

  2. window（win7）下安装ubuntu14.04lts (desktop)系统

    一.前期准备 1.大于2G的U盘一个(我的系统盘制作完成后大约占1个多G的容量) 2.已下载好的Ubuntu安装文件(选择在官网下载,有32和64位选择) 3.已安装好UltraISO软件的电脑(Ul ...

  3. sublime text3：快捷键

    1.就近选择相同项:ctrl+d,按住ctrl,然后多次按d,就不断往下选择相同项 2.选择所有匹配项:alt+f3,一次性选中所有匹配项 3.ctrl+shift+a:在html中同时按这三个键,则 ...

  4. 一个有趣的nginx问题引发的小问题

    最近处理一个nginx问题,故障现象是:所有的work进程,都在等锁.调用的是sem_wait 根据对应的堆栈,查看一下大家等的锁都一样,看看这把锁被谁拿了: 锁的结构是: typedef struc ...

  5. HG255D刷机OPENWRT笔记

    1.按网上的办法如下:(http://www.right.com.cn/forum/thread-143721-1-1.html) 自已编译了OPENWRT,然后拆开外壳接上TTL线,通电启动 然后用 ...

  6. [CI]CodeIgniter特性 & 结构

    ------------------------------------------------------------------------------------------------- 市场 ...

  7. flume 详细介绍

    http://blog.csdn.net/a2011480169/article/details/51544664 配有详细的例子. http://www.cnblogs.com/gongxijun/ ...

  8. 网络层——IP报文头介绍

    IP数据包也叫IP报文分组,传输在ISO网络7层结构中的网络层,它由IP报文头和IP报文用户数据组成,IP报文头的长度一般在20到60个字节之间,而一个IP分组的最大长度则不能超过65535个字节.  ...

  9. IE 11中 onpropertychange失效

    https://msdn.microsoft.com/zh-cn/library/ie/dn265032(v=vs.85).aspx 将突变事件和属性更改事件迁移到突变观察者 Internet Exp ...

  10. 吴裕雄 10-MySQL插入数据

    语法以下为向MySQL数据表插入数据通用的 INSERT INTO SQL语法:INSERT INTO table_name ( field1, field2,...fieldN ) VALUES ( ...