px与rpx关系与换算方法

原创已于 2023-11-13 16:58:00 修改 · 3.3w 阅读

55 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #linq #小程序

于 2021-12-16 18:32:35 首次发布

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了微信小程序中rpx单位的使用，以及rpx与px之间的转换方法。通过屏幕宽度与750rpx的关系进行换算，提供了转换函数示例，并强调了在开发过程中应注意的事项，包括选择iPhone6作为开发基准，使用偶数避免模糊，以及处理多元素高度计算时的精度问题。

小程序开发使用rpx 作为度量单位，rpx与px之间换算关系与屏幕宽度有关。

一、小程序开发文档中有对rpx的说明：

我的理解是，将不论什么尺寸的屏幕横向均分750份，将屏幕横向分辨率除以750。

如iphone5: 分辨率 320*568

rpx转px 计算：320/750 = 0.426666

px转rpx 计算：750/320 = 2.34375

具体各型号分辨率可点击小程序开发工具左上方查看：

二、转换方法

1. rpx 转换为 px ，传参类型是数字（Number）

// rpx 转换为 px ，传参类型是数字（Number）

export function rpxTopx(rpx) {

  let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度

  let px = (deviceWidth / 750) * Number(rpx)

  return Math.floor(px);

}

2. px转rpx，传参类型是数字（Number）

// px 转换为 rpx ，传参类型是数字（Number）

export function rpxTopx(px) {

  let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度

  let rpx = (750 / deviceWidth) * Number(px)

  return Math.floor(rpx);

}

1二、小程序开发时注意

1. 使用iphone6页面开发

iphone6分辨率是375*667,与rpx换算正好是2倍关系，便于单位计算

2. 长宽高建议使用偶数，减少出现边缘模糊,毛刺现象

3. 当需要获取多个元素高度相加计算时，需要先分开转换计算再相加，因为会涉及四舍五入问题