天下网吧 >> 网吧系统 >> 系统动态 >> 正文

让小程序能够适配不同系统平台,微信是这样做的

2016-12-9不详佚名

我们都知道,小程序是一个跨系统的平台。这就意味着,小程序会在不同的设备上运行,但不同设备的分辨率会有差异。在小程序中,如何在分辨率不同的设备上保证视觉元素的正常显示?这就需要名为rpx的动态尺寸单位。本期,我们为大家带来小程序rpx单位全解析,希望能够帮助你解决有关rpx的一切疑问。

为什么需要动态单位和rpx?

让小程序能够适配不同系统平台,微信是这样做的

“在显示屏上,每一个画面都是由无数的点阵形成的。这个点阵中,每一个点叫做像素,就是pixel(缩写为px)。

上面的那句话,对于很多人来说都是常识。

但是,随着Retina屏幕(即“视网膜屏")的推出和高分屏的普及,1 px所能代表的实际长度并非是一成不变的。

对于跨平台、跨设备的应用来说,单纯使用px并不能满足需要。因为,这很难保证小程序的元素,能在不同设备上正常显示——同样px尺寸的元素,在高分屏上显示会明显要比在低分屏显得更小。

因此,我们需要一个动态的长度单位。这个单位通过对不同屏幕的分辨率进行调整和适配,保证相同元素在不同屏幕上的展示是正常的。

苹果和Google对此都有相应的措施:

• 由于苹果对高分屏的优化良好,所以在iOS上,代码中的1 px所代表的实际像素数会根据不同设备动态调整,开发者不需要进行二次换算。

• 由于Android设备碎片化严重,Google不得不建立了一个新的名叫“density-independent pixel(密度无关像素,缩写为dp)"的尺寸单位,以适应不同分辨率屏幕的尺寸换算。

微信也为小程序提供了一个动态单位解决方案:它就是responsive pixel(动态像素),简称rpx。

Pixel与rpx、dp如何换算呢?

了解动态单位是怎么来的以后,我们下一步就该学习如何在 px 和 rpx、dp 之间进行换算了。

动态单位与 px 换算的基本概念是:选择一个分辨率作为基准,在基准分辨率中,一个像素点显示有多长,在其他屏幕上会显示同样长度。

例如,dp与px换算公式是:dp = px * (目标设备dpi分辨率/ 160)。

但微信小程序的rpx换算方式,会与其他动态单位的换算方法有些出入。微信官方提供的换算方式更“傻瓜"一些:rpx = px * (目标设备宽px值/ 750)。

举个例子:

• 目标设备的宽度如果是375px,按照750rpx进行换算,则等于1rpx = 0.5px

• 目标设备的宽度如果是1125px,换算后1rpx = 1.5px

想想是不是有些不太对劲?没错,如果将微信小程序放到平板电脑上运行,屏幕的宽度 px 值有可能会变化(横竖屏、分屏模式等等)。这时候,再以宽度为基准,就会出现元素显示不正确的问题。

从这一点可以看出,微信团队目前并不希望将小程序扩展到手机以外的设备中。因此,开发者暂时可以专注于提高小程序在手机上的体验,无需担心多尺寸屏幕带来的适配问题。

那能不能直接让 rpx 和 dp 进行互换呢?当然不能!

dp 是以屏幕分辨率为基准的动态单位,而 rpx 是以长度为基准的动态单位。就像“米"和“平方厘米"不能互换一样,dp 和 rpx 两者也是不能直接进行互换的,除非微信官方将 rpx设定为分辨率基准而非长度基准。

设计师该怎么做?

由于微信使用了 rpx 动态单位,设计稿的尺寸单位也推荐使用 rpx。那么问题来了,如果要改用 rpx 单位,以什么尺寸的屏幕作为设计稿标准会比较合适呢?

在微信官方的文档中,我们看到这样一句话:

“在iPhone 6上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

开发微信小程序时设计师可以用iPhone 6作为视觉稿的标准。

也就是说,设计师在设计小程序时,可以这样做:

• 直接以iPhone 6的屏幕尺寸(375×667)用作视觉稿尺寸,1 px = 0.5 rpx;

• 以1 px = 1 rpx的标准,将设计稿尺寸设定为750×1334。

在将设计稿转交给程序员之前,设计师需要清楚地描述设计稿尺寸和单位换算标准等,以便程序员快速实现界面效果。

如果想让你的小程序,在不同尺寸的机型上都能够完美显示,那就好好消化这篇文章吧。

本文来自微信公众号 知晓程序,微信号zxcx0101

本文来源:不详 作者:佚名

相关文章
没有相关文章
声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。若文章侵犯了您的相关权益,请及时与我们联系,我们会及时处理,感谢您对本站的支持!联系Email:support@txwb.com,系统开号,技术支持,服务联系QQ:1175525021本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧·网吧天下