uniapp中如何设置背景图自适应手机屏幕尺寸

一、设置原理

1.由于不同手机的高度是变化的，所以要做到自适应，就要解决不同手机高度能够动态获取。
2.设置page（相当于设置body）的宽度与高度100%
3.设置背景图容器的宽度100%，高度或者最小高度100%

<template>
  <view class="question-wrap" :style="{ height: screenHeight }">
    <!-- 顶部导航 -->
    <u-navbar
      :title="null"
      :border-bottom="false"
      :is-fixed="false"
      :background="null"
      back-icon-color="#ffffff"
    >
    </u-navbar>
    <!-- 顶部导航 -->

    <!-- 内容区域 -->
    <view class="content-wrap">
      <view class="countdown-wrap"> </view>
      <view class="question-content-wrap"></view>
    </view>
    <!-- 内容区域 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      //屏幕高度
      screenHeight: 0,
    };
  },
  onLoad() {
    this.screenHeight = uni.getSystemInfoSync().windowHeight;
  },
  methods: {},
};
</script>

<style lang="scss">
page {
  width: 100%;
  height: 100%;
}
.question-wrap {
  background: url("http://www.xxx.com/xxxxxx.png")
    no-repeat;
  background-size: 100%;
  width: 100%;
  min-height: 100%;
  .content-wrap {
  }
}
</style>

二、效果图

效果图