vue页面自适应问题窗口缩小页面元素也缩小

为什么我设置的自适应是这样的，为什么人家黑神话悟空的感觉没怎么变化，我的一下子就全是白的了底下

<el-carousel
      indicator-position="none"
      arrow="never"
      :height="bannerHeight + 'px'"
    >
      <el-carousel-item v-for="item in imgList" :key="item.id">
        <img ref="bannerHeight" :src="item.idView" width="100%" @load="imgLoad" />
      </el-carousel-item>
    </el-carousel>


mounted () {
    this.imgLoad()
    window.addEventListener('resize', () => {
      this.bannerHeight = this.$refs.bannerHeight[0].height
      this.imgLoad()
    }, false)
  }

人家黑神话的最大和缩小后的变化

img

img

为什么我的尺寸缩小后就这样了，请问有什么方法可以像黑神话那样吗

img

我去看了一下黑神话的
他是屏幕变化中 在修改图片的宽度 高度是没有变化 你为什么要修改你的高度呢

  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7721890
  • 你也可以参考下这篇文章：让你的页面更加清爽（vue实战，表格的优化，数据配置表格）
  • 除此之外, 这篇博客: VUE自定义指令，方法指令、权限指令，重点讲解方法指令（点击事件指令）中的 先附上自定义指令代码，然后解释 （大神只需要看关键代码） 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  •  

  • 您还可以看一下 陶国荣老师的2小时快速开发课：使用 Vue 开发人员信息管理系统课程中的 环境构建小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    关于Vue页面自适应的问题

    针对这个问题，可以尝试以下几种解决方案：

    1. 使用vw/vh单位进行布局

    vw指的是Viewport Width，即视口宽度的百分比，1vw等于视口宽度的1%，vh则是Viewport Height，表示视口高度的百分比。使用这种单位可以让页面在不同设备上的屏幕尺寸下保持相对一致的布局效果。

    在Vue项目中，可以在CSS中使用vw/vh单位进行布局，例如：

    .container {
  width: 80vw;
  height: 80vh;
  font-size: 2vw;
}
    1. 使用CSS媒体查询

    CSS媒体查询可以根据不同设备的屏幕尺寸设置不同的样式规则。在Vue项目中，可以在组件的样式中添加媒体查询，例如：

    @media (max-width: 768px) {
  .container {
    width: 100%;
  }
}

    这样，当设备宽度小于等于768px时，容器的宽度会变为100%。

    1. 使用Vue插件进行自适应布局

    可以使用一些Vue插件来完成自适应布局的功能，例如vue-responsive、vue2-hammer等。

    vue-responsive可以根据设备宽度设置不同的响应式布局规则，例如：

    import Responsive from "vue-responsive";

Vue.use(Responsive);

new Vue({
  el: "#app",
  data() {
    return {
      size: this.$responsive({ tablet: 768, desktop: Infinity })
    };
  }
});

    这样，就可以根据设备宽度来动态修改样式。

    总之，解决自适应问题的关键在于适当运用CSS和媒体查询，并根据项目的实际情况进行布局调整。