本文介绍了如何在微信小程序中使用mpvue实现自定义导航栏的适配方案，涉及到不同屏幕尺寸和像素比的换算，以及通过wx.getSystemInfo获取状态栏高度来解决刘海屏和水滴屏的问题。提供了具体的mpvue代码示例，包括在App.vue、frames.vue和index.vue中的应用，并展示了在不同设备上的实际效果。
在正文开始之前 首先得了解一下我们设计稿的1px在手机中是怎样显示出来的，首先看下图
从上图得知了各个安卓和IOS常规屏幕的宽高以及像素比，在日常设计稿常以iPhone6 750px(375 * 2 = 750) 为标准设计，从以上信息得知我们设计稿中的1px 在iPhone6中是占据了2px
下面将以10px为单位在每一个型号进行单位换算
| 型号 | 宽度 | 高度 | 设计稿单位（宽度） | 像素比 | 转换单位(10px) |
|---|---|---|---|---|---|
| iPhone5 | 320 | 568 | 640 | 2 | 20 |
| iPhone6 | 375 | 667 | 750 | 2 | 20 |
| iPhone6 Plus | 414 | 736 | 1242 | 3 | 30 |
| iPhone7 | 375< |
最低0.47元/天 解锁文章
扫一扫
3736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
