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样式
转换后的样式
cssrem转换工具_微信小程序开发-rem转换rpx小工具相关推荐
- 【微信小程序开发(云壁纸小程序教程)】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和 微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和 微 ...
- 微信小程序开发详细步骤(企业小程序开发流程)
今天珍奶bb给大家简单唠唠微信小程序开发详细步骤(企业小程序开发流程)? 微信小程序制作流程是什么?微信小程序制作模板套用怎么操作?今天珍奶bb给大家简单唠唠微信小程序制作流程是什么? 在唠微信小程序 ...
- 微信小程序开发学习1(小程序的入门知识)
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面的几个组成部分 能够知道小程序中常见的组件如何使用 能够知 ...
- 微信小程序开发初试实例结算小助手
微信小程序开发初试实例结算小助手 小程序码 创作背景 小程序功能 小程序实现 小程序开发方案(想看源代码,直接看这一项) 本着自己参加过学校组织的微信小程序云开发培训,就抱着尝试的心理去参加今年的高校 ...
- 微信小程序开发打开另一个小程序的实现方法
微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json {..." ...
- 微信废品回收小程序开发上门回收废品小程序开发
废品回收小程序系统如何做_微信小程序助力废品回收 微信废品回收小程序开发 微信废品回收小程序开发
- 从网页到微信小程序开发:一:小程序与普通网页的区别
提示:文章内容大部分摘抄微信官方文档,不喜勿喷,在此做个记录,同时也提出自己的思考和想法,希望看到的人也可以提出自己的看法,我会依照大家的看法不断修改文章,谢谢大家支持! 前言 相信有很多人都有过类似 ...
- 微信小程序开发风口,这些小程序营销玩法你知道吗?
从2016年,小程序正式启动内侧到现在,小程序经历了跌宕起伏的几年,我们也看到了其发生的巨大变化.从最开始的娱乐小游戏,到现在的营销工具,其价值逐渐上升.在小程序风口的带动下,如今应用小程序的行业越发 ...
- 百度小程序开发:点百度开发者工具上的“发布”按钮不能发布是怎么回事?
发布时要注意,一旦你线上有发布版本后,更新了小程序源码,重新发布,再次点击 发布 按钮时,没有上传的按钮,仔细看,原来是APPID,给你设置为XXX,点修改,把他修改回来即可. 点击完,你以为可以了, ...
- 微信小程序开发一些有趣的小程序
微信小程序开发出现了各种各样的,除了有商城小程序,分销小程序,预约小程序,外卖小程序,直播小程序等这些比较商业化的小程序之外,还有算命小程序,姻缘测试小程序等等之类的.那么这些有趣的小程序可以用来做什 ...
最新文章
- redis 双写一致性
- php跳转方式带rere_PHP翻页跳转功能实现方法
- 直接运行可执行文件linux终端一闪而过
- (转)C# foreach 中获取索引index的方法
- 《C程序员:从校园到职场》出版预告(1):从“高大上”到“柴米油盐”
- matlab factor函数,matlab中因子分析的函数factoran如何使用??
- CentOS Vi编辑器
- Java中对象和引用的理解
- Kafka—配置SASL/PLAIN认证客户端及常用操作命令
- java quartz mybatisplus_Springboot+redis+SpringMVC+Mybatis Plus分布式开发系统源码
- 声源测向: TDOA-GCC-PATH方法
- 汉字识别原理、方法与实现
- Quartus II 安装
- odi oracle to mysql_【ODI】| 数据ETL:从零开始使用Oracle ODI完成数据集成(三)
- 城市引力模型——城市经济联系度制作
- 温德姆酒店集团计划今年大中华区新开超过100家酒店
- 国赛mysql加固_2019 全国大学生信息安全竞赛创新能力实践赛3道Web Writeup
- 双(三氟甲基磺酰基)酰亚胺钠 cas91742-21-1白色-类白色晶体-粉末 分子量:303.1358892
- python 英语翻译_python 中英文翻译
- LaTeX 命令和代码结构简介