uni-app中px与rpx的转换方法

第一种转换方法：

        由rpx的微信官方介绍可知

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

           由此得知是以750物理像素为基准：px / rpx = screenWidth / 750

由此得知：

• rpx = (750 px) / screenWidth
• px = (screenWidth rpx) / 750

//rpx转px
rpxToPx(rpx) {
    const screenWidth = uni.getSystemInfoSync().screenWidth
        return (screenWidth * Number.parseInt(rpx)) / 750
}

//px转rpx
pxToRpx(px) {
    const screenWidth = uni.getSystemInfoSync().screenWidth
       return (750 * Number.parseInt(px)) / screenWidth
}

 第二种转换方法：

        uniapp 内置的转换方法

//rpx转px
rpxToPx(rpx) {
    return uni.upx2px(rpx)
}

//px转rpx
pxToRpx(px){
    let scale = uni.upx2px(100)/100;
    return px/scale 
}

补充：单位转换公式

说了这么一大堆，我们再来看看rpx和px有什么关系。

rpx单位规定如果在iPhone6下，也就是屏幕宽度375px，则

• 750rpx = 375px = 750物理像素
• 1rpx = 0.5px = 1物理像素

这也是很多人推荐用iphone6模拟开发的原因之一，单位转换很直观，就是2:1，但是不是在所有设备上都是2:1呢？曾经我也是怎么认为的，然后老出bug.....，其实这是有转化公式的，不是简简单单的2:1。

总的来说，还是以750这个物理像素为基准

• px / rpx = screenWidth / 750

然后我们就可以推出：

• rpx = (750 * px) / screenWidth

• px = (screenWidth * rpx) / 750

  // rpx 转px
  rpxToPx(){
      const screenWidth = uni.getSystemInfoSync().screenWidth
      return (screenWidth * Number.parseInt(rpx)) / 750
  }
  
  // px转rpx
  pxToRpx(){
      const screenWidth = uni.getSystemInfoSync().screenWidth
      return (750 * Number.parseInt(px)) / screenWidth
  }