微信小程序开发尺寸规范

假设你的设计稿是按照iPhone6设计的最好,因为微信小程序的设计规范采用了iPhone 6/7/8的物理像素宽度(375px)作为基准。这样一来就不需要做过多计算,设计稿上是多少就是多少,比如设计稿有一元素是width: 375px, height: 100px,你只需要在wxss写width: 750rpx, height: 200rpx,因为这种情况下1px = 2rpx。

如果你的设计稿不是iPhone6问题也不大,假设设计稿是iPhone5,它的尺寸是360 * 640,即width: 360px, height: 640px,比如在这设计稿上有一元素是width: 360px, height: 100px,你只需要用calc()函数来计算该样式的值,计算公式是width: calc(360 / 360 * 750rpx)以及height: calc(100 / 360 * 750rpx),注意rpx写在括号内部紧贴750,亲测写在外部不起效。

最后提一嘴,微信小程序开发中的机型预览是为了让开发者能直观感受不同机型的适配情况,跟设计稿是iPhone6还是iPhone5无关,不过为了更直观点,建议开发时将机型预览尺寸调整为设计稿对应尺寸。

如有错误,欢迎指出,谢谢。

你可能感兴趣的:(微信小程序,微信小程序,小程序)