• Welcome to Journal web site.

我是 PHP 程序员

- 开发无止境 -

Next
Prev

px与rpx关系与换算方法

Data: 2016-05-30 11:25:26Form: JournalClick: 1

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


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

image.png

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


如iphone5:   分辨率 320*568   


rpx转px    计算:320/750 = 0.426666


px转rpx    计算:750/320 = 0.234375


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


image.png


二、转换方法


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. 使用iphone6页面开发


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


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


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

Name:
<提交>