0


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
},

本文转载自: https://blog.csdn.net/qq_39998026/article/details/128919376
版权归原作者 卿本无忧 所有, 如有侵权,请联系我们删除。

“uni-app px与rpx的转换”的评论:

还没有评论