小程序 设计尺寸

做移动app开发都不可避免屏幕的适配，那么小程序里的屏幕怎么适配呢，小程序官网里说规定屏幕宽为750rpx，链接

意思是说不管什么屏幕，宽度都是750rpx，我们设计的时候都以宽为750rpx来设计，那么高度呢？

显然如果能知道高宽比我们就能知道高度了，高度=750rpx*高宽比

API里提供同步方法wx.getSystemInfoSync() 异步方法wx.getSystemInfo() 获得高宽信息

var sysinfo=wx.getSystemInfoSync();
console.log(sysinfo);

在开发者工具下输出为

发现

windowWidth:375 为750的一半，

windowHeight：627 ，乘以2的话为1254，而iphone6像素其实是1334，所以这个windowHeight为除去顶部navigationBar之后（以下称为窗口）的高度

375的单位为px（注意不是物理像素）,小程序里canvas和wxss里用的px都是这个px

那么如果我们要设置一个view宽占满手机要怎么做，可以设置width:750rpx ,or  width:windowWidth px ，注意并不是所有手机宽都是375px，这个数值是会随手机改变的。

我们可以保存px和rpx之间转换的变量

var sysinfo=wx.getSystemInfoSync();
if(sysinfo){
  this.globalData.sysinfo=sysinfo;
  var width=sysinfo.windowWidth;
  this.globalData.px2rpx=750/width;
  this.globalData.rpx2px=width/750;
}

这样当我们需要把px转为rpx或者rpx转为px就很方便了