不同分辨率下vue页面的高度自适应

1. 使用视口单位

.element {  
  height: 100vh; /* 使得元素高度等于视口高度的100% */  
  /* 可以减去一部分高度以适应页眉或页脚 */  
  height: calc(100vh - 100px);  
}

2. 使用百分比（%）高度

.parent {  
  height: 100vh; /* 父元素高度等于视口高度 */  
}  
  
.child {  
  height: 50%; /* 子元素高度为父元素高度的50% */  
}

3. 使用Flexbox或Grid布局

.container {  
  display: flex;  
  flex-direction: column; /* 垂直布局 */  
  height: 100vh;  
}  
  
.content {  
  flex: 1; /* 占据剩余空间 */  
}

4. 监听窗口大小变化

export default {  
  data() {  
    return {  
      windowHeight: window.innerHeight  
    };  
  },  
  created() {  
    window.addEventListener('resize', this.handleResize);  
  },  
  beforeDestroy() {  
    window.removeEventListener('resize', this.handleResize);  
  },  
  methods: {  
    handleResize() {  
      this.windowHeight = window.innerHeight;  
      // 这里可以执行更多基于新窗口高度的操作  
    }  
  }  
}

5. 使用媒体查询

@media (max-height: 600px) {  
  .element {  
    height: auto; /* 在小屏幕上使用不同的高度策略 */  
  }  
}