小程序中rpx和px相互转换方式

当前有个项目页面中弹框是用固定定位做的,需要利用top值让其居中。那么就需要计算top具体是多少;

当然计算方式是比较简单的:

top:(窗口高度-弹框高度)/ 2  

那么弹框高度使用rpx设置的,然而通过wx.getSystemInfoSync.windowHeight获取的窗口高度是px值。

这就需要先将窗口高度转换成rpx值才行。

那么需要下计算转换比率。其实在小程序中还是比较简单的,小程序屏幕固定750rpx来做的适配(与机型无关,任何机型设置750rpx即可全屏铺满)。

因此可以知道1rpx = (屏幕宽度/750)px。如iphone6中屏幕宽度375px,则1rpx=0.5px

其转化比率计算如下:

let rate=750 / res.windowWidth;           //px转换rpx

let reverseRatio=res.windowWidth / 750;   //rpx转换px

怎么使用呢?

let windowHeight = wx.getSystemInfoSync().windowHeight

let rate = 750 / windowWidth

let marginTop = windowHeight * rate  // 将屏幕高度转成了 rpx 值

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值