脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uni-app px与rpx转换

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

 更新时间：2023年10月20日 09:55:53   作者：卿本无忧  
这篇文章主要给大家介绍了关于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转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

最新评论