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转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

解决webpack无法通过IP地址访问localhost的问题
下面小编就为大家分享一篇解决webpack无法通过IP地址访问localhost的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
layer页面跳转,获取html子节点元素的值方法
今天小编就为大家分享一篇layer页面跳转,获取html子节点元素的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
基于JavaScript实现轮播图代码
在前端程序开发中，经常会实现js轮播图的效果，怎么实现的呢？下面小编给大家分享基于基于JavaScript实现轮播图代码，非常不错，感兴趣的朋友可以参考下
2016-07-07
JavaScript对IE操作的经典代码(推荐)
本篇文章主要是对JavaScript对IE操作的经典代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
javascript for循环设法提高性能
让你的for循环提升性能的写法，需要的朋友可以参考下。
2010-02-02
uni-app多环境部署解决方案详解
uni-app可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境,下面这篇文章主要给大家介绍了关于uni-app多环境部署的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-11
JS对象与json字符串格式转换实例
这篇文章主要介绍了JS对象与json字符串格式转换方法,以实例的形式详细讲述了js对象与json字符串格式转换的技巧,需要的朋友可以参考下
2014-10-10
JavaScript实现弹出式可拖动登录框
这篇文章主要为大家详细介绍了JavaScript实现弹出式可拖动登录框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
JS跨域解决方案之使用CORS实现跨域
正常使用AJAX会需要正常考虑跨域问题，所以伟大的程序员们又折腾出了一系列跨域问题的解决方案，如JSONP、flash、ifame、xhr2等等。本文给大家介绍JS跨域解决方案之使用CORS实现跨域，感兴趣的朋友参考下吧
2016-04-04
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
今天小编就为大家分享一篇解决layui上传文件提示上传异常,实际文件已经上传成功的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08