• 热门搜索 热门搜索

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

将 px 批量转换为 rpx

原创
时间2023/12/04 06:00:53 发布 预览数量314
分类: 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

暂无评论

暂无评论

目录

推荐阅读

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

    ## 一、前言 最近在学习搭建**Elasticsearch**集群,但是发现云服务(2核4G)资源根本就不够用,部署上去就直接宕机了。想着服务器资源太贵, 家里刚好有一台**64G**内存的闲置电脑。不如做一个**内网穿透**,可以远程访问。工作学习两不误。其实目前市面上已经有很多穿透工具了,比如向日葵~~ ,但是奈何带宽太小了,免费的才1M~~~ ## 二、什么是 FastTunnel **FastTunnel** 是用.net core开发的一款跨平台内网穿透工具,它可以实现将内网服务暴露到公网供自己或任何人访问。 与其他穿透工具不同的是:FastTunnel项目致力于打造一个易于扩

  • 解决:“The configured user limit (128) on the number of inotify instances has been reached....” 错误

    ## 一、场景再现 在linux系统上运行着10个微服务,突然发现某个服务挂了。遇到这种情况,一般就使用命令`docker start` 就可以解决。 然而发现命令无法使服务起来。根据跟踪容器日志发现是出现了异常,如下所示: ```shell Unhandled exception. System.IO.IOException: The configured user limit (128) on the number of inotify instances has been reached, or the per-process limit on the number of open fi

  • Docker 安装mysql

    ## 一、创建mysql 容器 ```shell docker run \ -d \# 后台运行 --restart=always \#总是跟随docker启动 --privileged=true\#获取宿主机root权限 -p 13306:3306 --name mysql \# 容器与主机映射端口为,主机13306,容器3306 -v /mysql/log:/var/log/mysql \# 容器运行后的名称 -v /mysql/data:/var/lib/mysql \# mysql 目录挂载 -v /etc/localtime:/etc/localtime:ro \#让容器的时钟与宿主

  • validate service connection: CRI v1 runtime API is not implemented for endpoint \"unix:///var/run/containerd/containerd.sock\": rpc error: code = Unimplemented desc = unknown service runtime.v1.RuntimeService

    ## 一、问题 安装k8s集群, Node节点加入主节点的时候(`kubeadm join...`),报错,报错信息如下: ```shell [root@node1 ~]# kubeadm join k8s-master:6443 --token 4nm8cy.jgxw8go95c1uqt6c --discovery-token-ca-cert-hash sha256:f1c08bce4ebeb8deb531b950e644cca399efc40e1a9ac99df21b7b38a31a6c02 [preflight] Running pre-flight checks

  • k8s 安装ingress,并解决拉取镜像失败的问题

    ## 一、前言 Service 是将运行在一组 Pods 上的应用程序公开为网络服务的抽象方法,但是Service 只能在内网间访问(NodePort方式用的较少), 那么外网的路由请求如何发送到 Service 上呢? k8s 为我们提供了 Ingress 网关服务。 ## 二、什么是Ingress ? Ingress 公开从集群外部到集群内服务的 HTTP 和 HTTPS 路由。 流量路由由 Ingress 资源上定义的规则控制。下面是一个将所有流量都发送到同一 Service 的简单 Ingress 示例: ![k8s 安装ingress,并解决拉取镜像失败的问题](/Article

  • ssh 免密登录

    ## 一、前言 SSH(Secure Shell)免密登录是一种安全便捷的远程登录方式,允许用户在不输入密码的情况下连接到远程Linux服务器。它通过密钥认证来实现登录,这种方法可以提高工作效率,同时加强系统的安全性。 ## 二、秘钥的存放位置 一般秘钥都存放在用户的根目录下 `~/.ssh`,如下图所示 ![ssh 免密登录](/ArticleFile/2024-01-09/802cf3e23bde4298bf4accd9929878c6.png 'ssh 免密登录') .ssh 目录下一般会有两个文件 `id_rsa:私钥` 、 `id_rsa.pub:公钥`。 ![ssh 免密

  • k8s http: server gave HTTP response to HTTPS client

    ## 一、问题 k8s 在拉取私有仓库镜像的时候报`http: server gave HTTP response to HTTPS client`错,网络上的答案都是千篇一律的,根本就没有抓住问题的根源。下面就有我来剖析一下问题的原因。 ```shell Type Reason Age From Message ---- ------ ---- ---- ------- Normal Schedule

  • org.jenkinsci.plugins.scriptsecurity.scripts.UnapprovedUsageException: script not yet approved for use

    ## 一、报错信息 jenkins 中编写pipeline脚本的时候,执行构建,报如下错误: ```shell Started by user admin org.jenkinsci.plugins.scriptsecurity.scripts.UnapprovedUsageException: script not yet approved for use at org.jenkinsci.plugins.scriptsecurity.scripts.ScriptApproval.using(ScriptApproval.java:676) at org.jenkinsci.plugin

  • kubeadm init:failed to pull image registry.k8s.io/pause:3.6

    ## 一、错误现象 在安装 **K8s 1.28.0** 的时候,**kubeadm init...** 执行失败,错误信息如下: ```shell [kubelet-check] Initial timeout of 40s passed. Unfortunately, an error has occurred: timed out waiting for the condition This error is likely caused by: - The kubelet is not running - The kubelet is

  • .net core 通过环境变量加载配置文件(Development、Staging、Production)

    ## 一、前言 在**.net core 2.1** 之前,每次更新程序, 都需要手动更改数据库连接字符串。如果不小心把测试库发布上去了, 问题就大了。不过好在.NET Core 2.1及以上版本增加了支持根据环境变量加载配置文件。简单点理解就是, **代码中有三个配置文件(开发,测试,生产),程序发布之后, 更具服务器的环境变量, 自动加载相应的配置文件,不用在每次手动的切换了**。很是方便。 ## 二、实现 要想实现此功能,我们需要设置对应配置文件的后缀,以便系统会自动识别。 **举个例子:** 假设现在有一个叫 `Database.json` 的数据库配置文件,我们只需要再创建两个配

加载中