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) / screenWidthpx = (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转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇Layui实现数据表格默认全部显示(不要分页)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了js操作css属性实现div层展开关闭效果的方法,涉及javaScript操作css样式实现div弹出层的效果,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了用js实现用户注册的简洁版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了javascript实现iframe框架延时加载的方法,可基于setTimeout实现这一功能,是非常实用的技巧,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了JS添加或删除HTML dom元素的方法,结合实例形式分析了javascript针对HTML DOM元素节点的创建、追加、删除等相关操作技巧与注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了selenium 反爬虫之跳过淘宝滑块验证功能，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
这篇文章主要为大家详细介绍了js实现登陆与注册功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
JavaScript检查数据中是否存在相同的元素（两种方法）
这篇文章主要介绍了JavaScript检查数据中是否存在相同的元素（两种方法）,需要的朋友可以参考下2018-10-10
本文主要介绍了javascript的基本数据类型和转换，具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
擦除效果在我们日常开发中也是时有见到的，通过擦除效果大大加强了与用户的交互性，所以下面这篇文章主要给大家介绍了利用js和canvas实现擦除效果的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。2017-04-04
最新评论