微信小程序-自動適配屏幕高度和寬度

微信小程序里面的height和width有幾種單位，分別是 rpx px vh 和 vw。

rpx

https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html

wx.getSystemInfo(Object object) 可獲取系統信息，屏幕的高度和可使用的高度以及寬度；
實例代碼

wx.getSystemInfo({
  success (res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  }
})

px

pr可以和rpx轉換。

var px = rpx / 750 * wx.getSystemInfoSync().windowWidth;

vw 和 vh

https://www.html.cn/book/css/values/length/vh.htm

w和vh是css3中的新單位，是一種視窗單位，在小程序中也同樣適用。

小程序中，窗口寬度固定為100vw，將窗口寬度平均分成100份，1份是1vw
小程序中，窗口高度固定為100vh ，將窗口高度平均分成100份，1份是1vh

所以，我們在小程序中也可以使用vw、vh作為尺寸單位使用在布局中進行布局。

實例代碼，需要2個view元素在屏幕中間高度各占比47%，寬度98%；

.header {
witdh: 98%;
height: 47vh;
}