不同分辨率下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; /* 在小屏幕上使用不同的高度策略 */  }  
}