• 热门搜索 热门搜索
菜单

您现在的位置是:博客 > 文章详情文章详情

将 px 批量转换为 rpx

原创
时间2023/12/04 06:00:53 发布 预览数量445
分类: css/css3 标签: 微信小程序

前言

在开发微信小程序的时候, 或多或少会遇到需要批量将px转换rpx的场景。如果手动一个一个的改,太费时间了。所以我们可以使用正则表达式批量的进行转换。

在线转换

楼主周末花了点时间,写了一个在线转换的小工具,有需要的可以直接访问就好了。
在线px转换成rpx

正则实现代码

下面的转换比例我是以iPhone6为基准进行转换的。

var text = "height: 54px;width:35px;font-size:16rpx"; 
var reg = /(:\s*)(\d+)px/gi;
var match = text.match(reg);
text = text.replace(reg, (match, $1, $2) => {
    var value =  parseFloat($2) * 2;
    return `${$1}${value}rpx`;
});

# 输出:height: 104rpx;width:70rpx;font-size:16rpx

扩展

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。

版权声明:本文为Converts的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://www.converts.cn/article/1004613.html

暂无评论

暂无评论

目录

推荐阅读

  • 移除Linux系统启动时的等待时间

    一、前言 VMware 虚拟机中安装了很多Linux 系统,每次启动的时候, 都卡在系统选择的界面上,除非手动选择, 否则要等很久才会进入系统,如下图所示: ![移除Linux系统启动时的等待时间](/ArticleFile/2024-06-24/e3ab02212cc946bd9c23159895177fb3.png '移除Linux系统启动时的等待时间') 二、关闭系统等待的事件 我们

  • GitLab 私有化部署

    一、GitLab 概述 git作为目前最流行的代码管理工具,已经成为了程序员必备的技能。虽然目前有 github(对国人不太友好) 、gitee 两个比较大的代码托管平台。但是出于各种原因,搭建自己的私有代码平台也成了一部分开发人员的选择。针对这种需求,这里为大家介绍的是其中的佼佼者gitlab,也是我们公司内部正在使用的一个代码管理平台。 GitLab是一个基于Git的开源代码管理平台,它

  • 云服务器购买按量付费实例,并搭建私有网络图解

    一、前言 最近在自学 k8s 集群化部署, 奈何云服务器包年包月太贵了, 学习成本飙升。好在各大云服务商支持按量计费 , 接下来就带大家一起过一下购买流程,并且使用私有网络。 二、私有网络 在购买云服务器之前,先了解下什么是私有网络。官网给出的解释是:私有网络(Virtual Private Cloud,VPC)是一块在云服务器上自定义的逻辑隔离网络空间,可以使云服务器, 云数据库资源构建逻

  • Docker 部署FastTunnel,实现内网穿透

    一、前言 最近在学习搭建Elasticsearch集群,但是发现云服务(2核4G)资源根本就不够用,部署上去就直接宕机了。想着服务器资源太贵, 家里刚好有一台64G内存的闲置电脑。不如做一个内网穿透,可以远程访问。工作学习两不误。其实目前市面上已经有很多穿透工具了,比如向日葵~~ ,但是奈何带宽太小了,免费的才1M~~~ 二、什么是 FastTunnel FastTunnel 是用.net

  • IP地址和子网掩码的关系

    一、概述 IP地址(Internet Protocol Address)和子网掩码(Subnet Mask)是计算机网络中两个核心的概念,它们共同工作以确保数据能够正确地在复杂的网络环境中传输到目标设备。 二、IP地址 `IP地址`是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异。它是一个32位的二进制数,但是在习惯上,我们

  • 修改Docker默认的存储驱动程序目录

    一、前言 今天使用jenkins对程序进行更新的时候,发现更新失败。经排查是因为系统磁盘满了,然而通过堡垒机看了下,系统空间还有很多,于是看了下系统分区: ![修改Docker默认的存储驱动程序目录](/ArticleFile/2024-06-06/444ede8a1b1b42058db18690fa995952.png '修改Docker默认的存储驱动程序目录') ![修改Docker默认

  • Windows 安装git的详细安装步骤 ,以及TortoiseGit 图形化工具

    一、前言 `Git` 是一个开源的分布式版本控制系统,用于有效、高速地处理从很小到非常大的项目版本管理。Git 与常用的版本控制工具 CVS, Subversion 等不同,它采用了分布式版本库的方式,不需要服务器端软件支持。 二、安装Git 1、Git 下载地址 [Git 下载地址](https://git-scm.com/downloads "Git 下载地址") ![Windows

  • 免费的 GIF 录屏工具下载

    一、前言 在写博客或者文档的时候,经常需要附上一些gif动图,可以让快速展示操作流程。下面`小C`就介绍几款我经常用到的几款免费的gif工具。 二、免费的Gif工具 1、GifCam GifCam是一款免费绿色软件,它能够录制屏幕上的动态内容,并将其保存为GIF动画图像。用户可以调整录制区域、帧速率等参数,以满足不同的录制需求。除了连续录制外,GifCam还支持单帧录制功能。用户可以手

  • 对比MySQL不同版本下表结构和数据存储的差异

    一、前言 在开始之前, 我们需要先了解一下 MySQL 的存储引擎有哪些。 `MySQL`常用的存储引擎有 InnoDB 和 MyISAM,而且两者都有各自的特点,适用于不同的场景。下面是对这两种存储引擎的简要对比: - InnoDB存储引擎 - 支持事务处理 - 支持行级锁 - 支持外键约束 - 可以根据事务日志实现数据恢复 - MyISAM存储引擎 - MyISAM 的读取性能

  • Linux系统定时任务 -- crontab命令

    一、前言 有时候需要在 Linux 系统中定时执行一些任务,我们就需要使用 `crontab` 命令创建定时任务。crontab 是“cron table”的缩写,其功能是管理定时计划任务。在Linux系统中的crond是一个定时计划任务服务,用户只要能够按照正确的格式(分、时、日、月、星期、命令)写入到配置文件中,那么就会按照预定的周期时间自动地执行下去,而crontab命令则是用于配置的工具

加载中