vueCli3实现图片自适应高度兼容iphoneX等手机

上一篇讲用TS动态去获取元素的高度有时候会出现获取的高度和页面高度不匹配的情况，因为有些刘海屏的手机计算高度会有些不同所以获取的高度就不同，这个时候可以采用布局的方式把图片铺满页面不用TS去动态获取了，代码如下：

---

页面结构样式

把背景图片作为img插入页面并且给外面的download_main_box设置position定位， 给图片设置高度100%，这里注意给子元素设置height:100%父元素也一定要设置1height:00%不然不会生效的。

页面内容部分用个download_content_box包起来并且设置position定位，这样里面就可以正常布局了

<template>

  <div class="download_main_box">

    <img src="../assets/images/back.png" class="download_main_img" /><!--这个插入作为背景的图片-->

    <div class="download_content_box">

      <div class="download_content_tip">

        <div class="tiptext">

          <p>川水 , 全球创意百货</p>

          <p>一站式购物、社交、分享平台</p>

        </div>

      </div>

    </div>

  </div>

</template>

---

样式代码

---

<style lang="less">

.download_main {

  &_box {

    width: 100%;

    height: 100%;

    top: 0;

    position: absolute;

    overflow: hidden;

  }

  &_img {

    width: 100%;

    height: 100%;

  }

}

.download_content_box {

  width: 100%;

  position: absolute;

  top: 8%;

  left: 0;

  .download_content_tip {

    width: 100%;

    text-align: center;

    .tiptext {

      width: 4rem;

      height: 0.88rem;

      margin: 0 auto;

      p {

        font-size: 0.3rem;

        color: #000;

      }

    }

  }

}

</style>

样式是采用less编写的其实和普通的css也没有区别布局都是一样的，希望以上内容对你们能有所帮助