uni-app中px与rpx的转换方法
作者:卿本无忧
这篇文章主要给大家介绍了关于uni-app中px与rpx的转换方法,rpx单位最初由微信推出,它与我们常用px一个很大的区别就是具有响应式,需要的朋友可以参考下
第一种转换方法:
由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(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 }
总结
到此这篇关于uni-app中px与rpx的转换方法的文章就介绍到这了,更多相关uni-app px与rpx转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!