微信小程序px与rpx之间的相互转换

news/2024/7/20 2:12:11 标签: 小程序

首先我们需要知道,小程序官方为了适配各类手机屏幕,推荐使用rpx单位进行绘图,而且在所有的机型上面,屏幕的宽度都是固定的750rpx,所以我们可以利用这个条件进行rpx-px之间的单位转换。
获取系统屏幕的宽度的方法:

wx.getSystemInfoSync().windowWidth //单位是(px)

举例:如果UI设计的是宽高都是150rpx的图片,那么换算成px就是:

150rpx/750*wx.getSystemInfoSync().windowWidth = 实际的px

如果是150px,那么换算成rpx就是:

150px/wx.getSystemInfoSync().windowWidth*750 = 实际的rpx

最终得到的公式就是:

px = rpx/750*wx.getSystemInfoSync().windowWidth*750
rpx = px/wx.getSystemInfoSync().windowWidth*750

http://www.niftyadmin.cn/n/1728131.html

相关文章

kill -9都杀不掉的进程怎么搞

怎样杀掉kill -9都杀不掉的进程 Linux系统下经常需要用到杀进程的命令,但有时候kill -9 执行完之后,发现进程号还在,这时候需要如何解决。 (1)kill -9 命令 kill -9 发送SIGKILL信号给进程,将其终止&…

kafka自动清理日志

Kafka日志的清除 Kafka将消息存储在磁盘里,随着程序的运行,Kafka会产生大量的消息日志,进而占据大部分磁盘空间,当磁盘空间满时还会导致Kafka自动宕机,因此Kafka的日志删除是非常有必要的。 1. Kafka的日志清除策略 …

微信小程序实现日期格式化

1、获取时间戳格式的系统日期 //获取系统时间var nowtime new Date().getTime()console.log(现在的时间是nowtime)输出: 现在的时间是16153600400982、将时间戳格式的日期转换成yyyy-MM-dd HH:MM:SS /*** * param {*} times 时间戳* 转换为 yyyy-MM-dd HH:MM:SS…

小程序实现活动倒计时显示(精确到时分秒)

直接上代码&#xff1a; wxml: <text>{{day}}天{{hour}}时{{minute}}分{{second}}秒</text>js onLoad: function (options) {var that this;that.countDown(2021-03-22 10:00:00)},/*** 倒计时* * param endTime 结束日期时间* **/countDown: function (endTime…

微信小程序引入Vant Weapp组件库

第一步&#xff1a; 在项目的根目录打开终端窗口或者在微信的开发者工具里直接新建一个终端。 我是直接在开发者工具里新建了一个终端&#xff0c;效果是一样的。如图&#xff1a; 新建终端之后&#xff0c;直接输入 npm init 按下回车会让你输入packagename&#xff0c;输入…

scroll-view 实现自定义模块的横向滑动(到屏幕的中间显示)

想要实现的功能是&#xff1a;一个横向的tab栏&#xff0c;点击item的时候&#xff0c;item自动滚动到屏幕的中间展示&#xff0c;有想过用vant的插件库来实现&#xff0c;但是那个不支持自定义内容&#xff0c;所以只好自己实现了。 效果图展示&#xff1a; 代码实现&#x…

微信小程序 scroll-view 设置scroll-x 失效问题

想实现一个横向滑动的scrollview&#xff0c;以为直接给scroll-view设置 scroll-x 就能解决&#xff0c;结果失算了&#xff0c;先看代码 <scroll-view class"scroll" scroll-x"true"><view class"haibao_item" wx:for"{{item.rec…

如何使用Java进行Web应用的测试?

在Java中&#xff0c;有多种可以用于Web应用测试的工具和框架。以下是一些常用的方式&#xff1a; JUnit&#xff1a;JUnit是Java中最流行的单元测试框架之一。它可以用于编写单元测试用例&#xff0c;对Web应用的单个组件进行测试。通过模拟请求和响应对象&#xff0c;可以测试…