微信小程序 --- mpvue 自定义导航栏适配方案

最新推荐文章于 2024-05-22 09:21:59 发布

豆i浆

最新推荐文章于 2024-05-22 09:21:59 发布

阅读量5.2k

点赞数 4

分类专栏：微信小程序文章标签： mpvue 微信小程序

本文链接：https://blog.csdn.net/sinat_19327991/article/details/85702340

版权

在正文开始之前首先得了解一下我们设计稿的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	667	750	2	20
iPhone7 Plus	414	736	1242	3	30
iPhone X	375	812	1125	3	30
Nexus 5	360	640	1080	3	30
Nexus 5x	411	731	1078.875	2.625	26.25

关注