第一种转换方法:
由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
}
第二种转换方法:文章来源:https://www.toymoban.com/news/detail-512915.html
uniapp 内置的转换方法文章来源地址https://www.toymoban.com/news/detail-512915.html
// rpx转px
rpxToPx(rpx) {
return uni.upx2px(rpx)
}
// px转rpx
pxToRpx(px) {
//计算比例
let scale = uni.upx2px(100)/100;
return px/scale
},
到了这里,关于uni-app px与rpx的转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!