微信小程序设计稿的尺寸

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就交给小程序自己换算。

转换规律：

设计稿是375px：1rpx=0.5px

设计稿是750px: 1rpx=1px

1. image组件默认宽度300px、高度225px  ；

2.css设置宽高（尺寸最好为rpx，更适应屏幕）

3.mode 设置缩放模式（13种）

样式设置宽度100%   添加属性 mode="widthFix"

4.套在div种，设置div宽高，

需要iphone11的小程序大小是1rpx=0.5px。

需要注意，不同手机高度是不相同的。当然宽度也不相同，但是小程序给了你一种机制rpx，可以把屏幕宽度确定在750rpx，那么只要考虑高度上适应。

官方小程序菜单位于所有界面（包括小程序内嵌的网页和插件），且位置固定，开发者不可对其内容进行自定义，只能选择深浅两种配色方案，设计时要预留出该位置区域，若要在小程序菜单附近放置可交互元素，要注意与小程序菜单不冲突，可识别，易 *** 作。

---