微信小程序——获取到px转化为rpx(根据设备宽高动态设置元素宽高)

在项目中需要给一个view标签动态的设置高度

首先,先通过调用wx.getSystemInfo获取设备信息

可以获取的信息如下图
这里写图片描述

wx.getSystemInfo({
  success: function(res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})

这里我们可以获取到当前设备的screenHeight屏幕高度和windowHeight可使用窗口高度等,但是获取到的都是以px为单位的,如果要使用rpx的话则会需要有一个换算的操作

在换算前,先了解下rpx的由来

rpx是微信小程序中推出的新单位可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。所以可以将rpx理解为是rem方案的升级。

如下是官方文档给出的描述
这里写图片描述
在分析后可以得出,1rpx = 750 / 设备屏幕宽度

换算如下

wx.getSystemInfo({
  success:function (res) {
    console.log(res.windowHeight) // 获取可使用窗口高度
    let windowHeight = (res.windowHeight * (750 / res.windowWidth)); //将高度乘以换算后的该设备的rpx与px的比例
    console.log(windowHeight) //最后获得转化后得rpx单位的窗口高度
  }
}) 
  • 8
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值