Uni-app 中 rpx 用法_uniapp rpx

作者：羊村懒王 | 2024-02-19 03:44:36

踩

uniapp rpx

在开发过程中经常出现按设计搞上的尺寸写最终在不同手机上显示不一样。经常被UI 怼

后来才知道 rpx 这种牛逼的单位，但是看官网写的换算方法有点懵

rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在 uni-app 中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

。。。。。

仔细看重点 uni-app 规定屏幕基准宽度 750rpx。

用图来介绍这个设计稿的宽度是 375px

这个组件宽度 330px

所以在 uni-app 中应该是 750 * 330 / 375 = 660rpx

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/112425