微信小程序 不同设备下的屏幕适配处理 (px和rpx换算)
2020-02-02 本文已影响0人
CoderZb
进行移动开发，屏幕适配是非常有必要的，像我之前做原生iOS开发,适配方式有很多种(
1.纯代码适配 2.三方框架Masonry适配 等等)。
微信小程序开发也是基于移动设备的，在微信小程序使用纯代码进行适配时，只需要两步即可。
步骤1：将.wxss文件中设置的尺寸单位由px改成rpx
改为rpx的作用：微信底层会根据屏幕宽度自动调整标签中 所设置的尺寸大小，不用我们过问。
步骤2：单位换算
以下图为例，ui给定的头像的宽高为90px：
ui小妹以苹果6模板做的图片：【多数公司都以苹果6为基准】
1.开发人员在css文件中以px为单位使用的话，要除以2才能当做正常的尺寸使用,即45px;
2.开发人员在微信小程序的wxss文件中以rpx为单位使用的话,要写成90rpx。
3.苹果6模板 换算关系: ui给定的90px = 原生iOS的45 = css的45px = 微信小程序的90rpx
4.摘出来可以得知，css的px和wxss的rpx的换算关系：1px = 2rpx
ui小妹以苹果6plus模板做的图片：
1.开发人员在css文件中以px为单位使用的话，要除以3才能能当做正常的尺寸使用,即30px;
2.开发人员在微信小程序的wxss文件中以rpx为单位使用的话,要写成54.3rpx。
3.苹果6p模板 换算关系: ui给定的90px = 原生iOS的30 = css的30px = 微信小程序的54.3rpx，
4.摘出来可以得知，css的px和wxss的rpx的换算关系：1px = 1.81rpx
微信小程序官方文档对px和rpx的换算做了详细的表格
总结：ui以苹果6或者苹果6plus为模板设计出来的图片，px和rpx都需要做运算处理，规律如上，小程序官方文档建议ui以苹果6模板作图。
image.png
我的这篇文章有各种设备的尺寸信息手机屏幕尺寸、设备信息
