微信小程序高度自适应布局

上图是我想要实现的效果，图片和文字描述区域各占屏幕的50%；在微信小程序中的通常做法是内联样式控制。

<!--index.wxml-->
<view class="">
    <view class="img_box" style='height:{{helfH}}rpx'>
        <image src='../../image/2.jpg'></image>
    </view>
    <view class="text_box" style='height:{{helfH}}rpx'>
        <view class="text_content" style='height:{{textH}}rpx'>
            你愿意成为rwby小队的一员么？
        </view>
        <view class="do_box">
            <view class="do_btn do_a">A.同意</view>
            <view class="do_btn do_b">B.不同意</view>
        </view>
    </view>
</view>

我们在内联样式中设置好高度值，helfH,textH，然后在js中算出这两个值并保存即可。

 //高度自适应
     var that = this;
      wx.getSystemInfo({
          success: function (res) {
              var clientHeight = res.windowHeight,
               clientWidth = res.windowWidth,
               rpxR = 750 / clientWidth;
              var helfH = clientHeight *0.5* rpxR;
              var textH = helfH - 100;
              that.setData({
                  helfH: helfH,
                  textH: textH
              });
          }
      });

css设置如下

/**index.wxss**/
.img_box{
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
}
.img_box image{
    width:100%;
    height:100%
}
.text_box{
    width: 100%;
    padding:5px 10px;
    font-size:32rpx; 
    box-sizing: border-box;
}
.do_box{
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
}
.do_box .do_btn{
    display: inline-block;
    width: 200rpx;
    height:80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 5px;
    background-color: #286bfd;
    color:#fff;
}
.do_box .do_btn.do_a{
    margin-right:20px;
}