微信小程序：rpx 和 wx.getSystemInfoSync() 屏幕自适应

最新推荐文章于 2025-03-12 07:00:00 发布

谈蕾蕾

最新推荐文章于 2025-03-12 07:00:00 发布

阅读量1.1k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_43828196/article/details/104278641

版权

vue 专栏收录该内容

6 篇文章

订阅专栏

本文详细解释了小程序中rpx与px单位的换算原理，指出rpx是根据屏幕宽度动态调整的尺寸单位，确保不同设备下的一致布局效果。通过实例展示了如何获取当前设备下rpx对应的px值，以及如何计算特定元素的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

px和rpx换算

rpx是小程序中的尺寸单位，它有以下特征：

小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此。
1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px）。

举例子：
可获得在当前设备下的屏幕中，rpx所换算的px值
1rpx=res.screenWidth/750
var bgheight = res.windowHeight/rate-20，bgheight为对话框区域scroll-view的高度，减去的20是输入对话的文本框的长度

    wx.getSystemInfo({
      success: function (res) {
        console.log(res.screenWidth)
        console.log("1rpx="+res.screenWidth/750)
        console.log(res.windowHeight)
        console.log(res.screenHeight)
        console.log(res.statusBarHeight)
        var rate=res.screenWidth/750
        var bgheight = res.windowHeight/rate-20
        console.log(bgheight)
        that.setData({
          bgheight: bgheight
        })
      }
    })