微信小程序 不同设备下的屏幕适配处理 (px和rpx换算)

Posted 2023-04-24

参考技术A 改为rpx的作用：微信底层会根据屏幕宽度自动调整标签中 所设置的尺寸大小，不用我们过问。

以下图为例，ui给定的头像的宽高为90px：

总结：ui以苹果6或者苹果6plus为模板设计出来的图片，px和rpx都需要做运算处理，规律如上，小程序官方文档建议ui以苹果6模板作图。

我的这篇文章有各种设备的尺寸信息 手机屏幕尺寸、设备信息

设计微信小程序是按照啥尺寸做？

想设计一个微信小程序，但是不知道应该按什么尺寸做？是按手机APP的尺寸吗？比如 640 ？

每个型号的手机分辨率可能是不一样的，没有统一的尺寸，建议分辨率稍微做大一点，或者就按销量比较高的那一类型的手机分辨率来设计，小程序在不同的手机端展示时能够自适应分辨率的。

参考技术A rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)

iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx
注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
建议：设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算 参考技术B 如果是这样，劝你找第三方做吧，也花不了多少钱 参考技术C 不用说这么复杂，直接做成宽度750px的就行，其他尺寸不用考虑，小程序代码单位是rpx，做成750px，写代码方便单位换算，1px=1rpx，不用再费脑子换算单位了 参考技术D 640*1134吧