微信小程序：适配手机屏幕宽高度的设置方法

我们在做小程序页面时常常会需要设置背景，而不同手机的屏幕宽高度并不一样，虽然设置宽度为750rpx来解决宽度自适应的问题，但高度却没有这种方法，下面来简单介绍一下设置高度自适应的方法：

一、750rpx自适应宽度

rpx是小程序自带的衡量尺寸，可以根据屏幕宽度进行自适应，750rpx则设定为手机页面宽度。而不同的手机屏幕大小750rpx对应的px不同，如iphone6的宽度是375px，在iphone6的小程序中750rpx就等于375px。
故一般在wxss中设置

width：750rpx;

即可解决宽度自适应

二、设置自适应高度

1、首先在页面的js中定义变量

let SCREEN_WIDTH = 750
let RATE = wx.getSystemInfoSync().screenHeight /wx.getSystemInfoSync().screenWidth

其中getSystemINofSync()可以让系统返回屏幕高度

2、在js下的page中定义data

Page({
  data: {
    ScreenTotalW: SCREEN_WIDTH,
    ScreenTotalH: SCREEN_WIDTH * RATE,
    }，

3、wxml中使用

<view class="container"style="width:{{ScreenTotalW}}rpx;height:{{ScreenTotalH}}rpx" >
  <text>文章轮播图</text>
</view>

三、相关知识及遇到的问题

1、data

(1)data是页面第一次渲染使用的初始数据
(2)数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组
(3)每次使用要给自定义的data加上{{data}}

2、问题

（1）在data中添加语句，添加在前两行就ok，放在原data后面就报错
（2）目前是在wxml中的标签中添加样式来使用，但直接在wxss当中用就会报错
参考文章