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

Posted 2023-03-23

想设计一个微信小程序，但是不知道应该按什么尺寸做？是按手机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吧