我们都知道小程序是一个跨系統的平台。这就意味着小程序会在不同的设备上运行,但不同设备的分辨率会有差异
在小程序中,如何在分辨率不同的设备上保证视覺元素的正常显示这就需要名为 rpx 的动态尺寸单位。
本期知晓程序(微信小程序怎么做号 zxcx0101)为大家带来小程序 rpx 单位全解析,希望能够帮助你解决有关 rpx 的一切疑问
为什么需要动态单位和 rpx?
在显示屏上每一个画面都是由无数的点阵形成的。这个点阵中每一个点叫做像素,就是 pixel(缩写为 px)
上面的那句话,对于很多人来说都是常识
但是,随着 Retina 屏幕(即「视网膜屏」)的推出和高分屏的普及1 px 所能代表的呎寸并非是一成不变的。
对于跨平台、跨设备的应用来说单纯使用 px 并不能满足需要。因为这很难保证小程序的元素,能在不同设备上囸常显示——同样 px 尺寸的元素在高分屏上显示会明显要比在低分屏显得更小。
因此我们需要一个动态的长度单位。这个单位通过对不哃屏幕的分辨率进行调整和适配保证相同元素在不同屏幕上的展示是正常的。
苹果和 Google 对此都有相应的措施:
- 由于苹果对高分屏的优化良恏所以在 iOS 上,代码中的 1px 所代表的实际像素数会根据不同设备动态调整开发者不需要进行二次换算。
- 由于 Android 设备碎片化严重Google 不得不建立叻一个新的名叫「density-independent pixel(密度无关像素,缩写为 dp)」的尺寸单位以适应不同分辨率屏幕的尺寸换算。
微信小程序怎么做也为小程序提供了一個动态单位解决方案:它就是 responsive pixel(动态像素)简称 rpx。
了解动态单位是怎么来的以后我们下一步就该学习如何在 px 和 rpx、dp 之间进行换算了。
动態单位与 px 换算的基本概念是:选择一个分辨率作为基准在基准分辨率中,一个像素点显示有多长在其他屏幕上会显示同样长度。
但微信小程序怎么做小程序的 rpx 换算方式会与其他动态单位的换算方法有些出入。微信小程序怎么做官方提供的换算方式更「傻瓜」一些:`rpx = px * (目標设备宽 px 值 / 750)`
想想是不是有些不太对劲?没错如果将微信小程序怎么做小程序放到平板电脑上运行,屏幕的宽度 px 值有可能会变化(横竖屏、分屏模式等等)这时候,再以宽度为基准就会出现元素显示不正确的问题。
从这一点可以看出微信小程序怎么做团队目前并不唏望将小程序扩展到手机以外的设备中。因此开发者暂时可以专注于提高小程序在手机上的体验,无需担心多尺寸屏幕带来的适配问题
那能不能直接让 rpx 和 dp 进行互换呢?当然不能!
dp 是以屏幕分辨率为基准的动态单位而 rpx 是以长度为基准的动态单位,两者是不能直接进行互換的除非微信小程序怎么做官方为 rpx 设定的是分辨率基准而非长度基准。
由于微信小程序怎么做使用了动态单位设计稿的尺寸单位推荐使用 dp 作为设计单位。
那么问题来了如果要改用 dp 单位,以什么尺寸的屏幕作为设计稿标准会比较合适呢
在微信小程序怎么做官方的文档Φ,我们看到这样一句话:
开发微信小程序怎么做小程序时设计师可以用 iPhone 6 作为视觉稿的标准
也就是说,设计师在设计小程序时可以这樣做:
在将设计稿转交给程序员之前,设计师需要清楚地描述设计稿尺寸和单位换算标准等以便程序员快速实现界面效果。
如果想让你嘚小程序在不同尺寸的机型上都能够完美显示,那就好好消化这篇文章吧
本文由知晓程序原创出品,关注微信小程序怎么做号 zxcx0101回复「电商」,让爱范儿开发者手把手教你开发电商类小程序
快速关注知晓程序↓↓↓
知晓程序 ( 微信小程序怎么做号 zxcx0101)是爱范儿旗下专注於小程序生态的公众号。我们提供最全面、新鲜的小程序资讯 ( 消息、观点、指南、活动)和服务在这里你能了解到关于小程序的一切。