微信小程序开发尺寸规范

文章讲述了在微信小程序设计中,使用iPhone6的物理像素宽度作为基准进行设计和适配的方法,包括使用rpx单位和calc()函数处理不同设备的兼容性,同时强调机型预览功能的目的和建议。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

假设你的设计稿是按照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无关,不过为了更直观点,建议开发时将机型预览尺寸调整为设计稿对应尺寸。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值