进行移动开发,屏幕适配是非常有必要的,像我之前做原生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模板作图。
我的这篇文章有各种设备的尺寸信息手机屏幕尺寸、设备信息