移动设备中的分辨率与rpx

本文探讨了屏幕分辨率的概念,解释了720p与1080p屏幕的实际大小区别,并介绍了逻辑分辨率(pt)及其与屏幕尺寸的关系。通过以iPhone6为例,详细说明了小程序中rpx单位的设计原理及如何实现跨设备的一致布局。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先说一个很有意思的问题:一块720p的屏幕和1080p的屏幕那个大?

  这个问题很有代表性,如果手机竖着放,720p=720px*1280px,而1080p=1080px*1920px;那么在宽度上,前者是720个像素,后者是1080个像素,后者一定比前者大吗?

  答案是否定的,后者不一定比前者大,还可能和前者一样大,甚至比前者小。

  这里需要搞清楚一个概念,像素点只有个数的问题,没有大小的问题。那什么才和大小有关呢?是逻辑分辨率(pt),我们来看一张表格:


    屏幕尺寸决定逻辑分辨率,它们之间有对应关系,但是这个换算关系涉及到屏幕的栅格渲染,较为复杂,所谓屏幕分辨率,就是一个物理长度的单位,而这里的render指的是每个Pt中包含几个px,比如iPhone3GS和iPhone4s,实际尺寸都是3.5英寸,即都是320pt*480pt,但是由于在4s中每个pt可以包含2个px了,所以显示更加细腻了。


 这样就很明白了。

  那么小程序开发中,这一块最有意思的是,它在设计rpx这玩意的时候,完完全全就是以iPhone6为模板的。在且只在iPhone6中,1px=1rpx=0.5pt。

  也就是说,对于一张设计稿,只要物理分辨率和iPhone6保持一致,为750px*1334px,按照1:1的换算关系在小程序中写成rpx,那么这个布局和比例在任何设备显示都是一致的。

  因为使用rpx,小程序会自动在不同分辨率的设备中进行自适应转换,而使用px就不会。

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值