rpx 和px 计算公式

rpx 和px 计算公式,第1张

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

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

换言之,页面元素宽度在 小程序 中的宽度计算公式:

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

举例说明:

若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 小程序 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。

若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 小程序 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。

若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 小程序 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。

官方文档介绍:

因此我们可以得知,任何手机屏幕宽度都是 750 rpx,手机屏幕的高度则可以由宽高比计算得出。在模拟器中你可以看到 iPhone 7, iPhone 7 Plus 和 iPhone X 的宽高比。

首先要分清两种分辨率:

视觉上的清晰度

单位逻辑分辨率上的物理像素点越多,视觉效果越清楚。

但是人类的眼球是有视觉极限的。也就是326ppi

通常来说一个pt可以由1个px或者2个px甚至3个px构成

结论:工作时如果按照iphone6来设计的,将设计稿的1px=1rpx=0.5pt。由于rpx会随着屏幕的尺寸调整,所以建议文字类的不建议用rpx,会导致页面字体过小


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12079984.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存