登录 | 注册
小程序交流 +关注 已有0人关注 +发表新主题

小程序自适应单位rpx的秘密

发表在 2019-3-18 18:22 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 453

本帖最后由 254360258 于 2019-3-18 18:35 编辑

小程序自适应单位rpx的秘密

小程序自适应单位rpx的秘密
在小程序里,长度单位既可以使用rpx,也可以使用px。使用rpx可以使组件自适应屏幕的高度和宽度,但使用px不会。要透彻地理解rpx需要对移动端分辨率有一定的了解,比如物理分辨率px、逻辑分辨率pt等概念。


建议以IPhone 6的宽度750个物理像素作为标准,来做设计图。在此宽度下,这张设计图里每个元素的尺寸转换到小程序样式时,转换比较为1物理像素=1rpx=0.5pxrpxpx就是小程序样式里可以使用的两种长度单位。


举个例子,我们的页面设计图的宽度总长是750像素,它是以 IPhone 6的尺寸来设计的,而其中的头像图片高宽为200像素*200像素。如果想在IPhone 6里正确地显示 这张200像素*200像素的图片,那么相应地image组件的高宽应该设置为多少呢?


答案是要不就设置为高200rpx,宽为200rpx,要不就设置为高100px,宽 100px。这两个单位,在IPhone 6下显示效果一样,但如果我们将模拟器切换到其他机型,这两种不同的单位就会出现差异。rpx将随着屏幕尺寸的变化而变化,但px不会。那么到底选择rpx还是px呢?这取决于你需要元素随着移动设备尺寸的变化而变化,还是让元素始终保持不变,需要具体问题具体使用。

最后,我们为什么强调最好是在IPhone 6的尺寸做设计图呢?因为只有在IPhone 6的尺寸下,设计图里的1个像素才满足:1物理像素=1rpx=0.5px的转换关系。


如果不以IPhone 6的标准做设计图,也是可以的。但非IPhone  6的尺寸下,设计图与rpx px的转换关系就不是整数倍,计算起来比较麻烦。这也是官方建议的一个设计标准。

扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴