vue 屏幕自适应高度

Vue实现屏幕自适应高度主要依赖于计算属性和响应式数据。通过监测屏幕尺寸的变化来调整元素的高度。以下是示例：

1. 首先，在data中定义屏幕相关的初始值[^1]：

data() {
  return {
    screenWidth: document.documentElement.clientWidth,
    screenHeight: document.documentElement.clientHeight,
    scaleNum: '',
    flag: true, // 全屏标志，默认情况下不启用全屏模式
  }
}

2. 当屏幕大小变化时，可以通过`window.addEventListener('resize', handleResize)`监听事件，更新数据并应用到视图中：

methods: {
  handleResize() {
    this.screenWidth = window.innerWidth;
    this.screenHeight = window.innerHeight;
    if (this.flag && this.screenWidth >= 1200) { // 当满足条件时（如大于1200px）进入全屏模式
      this.scaleNum = 'fullscreen'; // 更新scaleNum
    } else {
      this.scaleNum = ''; // 撤销全屏模式
    }
  },
},
mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize); // 移除事件监听
}

3. 在CSS中设置#screen-content和#main的样式，使其根据屏幕高度自适应：

#screen-content {
  /* ... */
  min-height: 100vh; // 保证内容区始终填充整个视口高度
}

@media screen and (min-width: 1200px) and (max-width: 1920px) {
  .fix {
    /* 当处于半屏或全屏模式时，可能需要对特定屏幕尺寸进行调整 */
    height: calc(100% - 100px); // 示例减去顶部导航栏高度
  }
  #main {
    height: 100%;
    transform: none; // 如果不需要旋转，移除transform
  }
}

@media screen and (max-width: 1200px) {
  #main {
    margin-left: 0; // 在小屏幕下，取消水平居中
  }
}