Uni-app 中 rpx 用法

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

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

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

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

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

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

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

。。。。。

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

Uni-app 中 rpx 用法_第1张图片

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

Uni-app 中 rpx 用法_第2张图片

这个组件宽度 330px

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

 

你可能感兴趣的:(前端,css)