如何在仅更改屏幕高度的情况下调整页面大小

@media screen and (max-height: 600px) {
  /* 在屏幕高度小于等于600px时应用的样式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-height: 601px) and (max-height: 900px) {
  /* 在屏幕高度在601px和900px之间时应用的样式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-height: 901px) {
  /* 在屏幕高度大于等于901px时应用的样式 */
  body {
    font-size: 18px;
  }
}

window.addEventListener('resize', function() {
  // 获取屏幕高度
  var screenHeight = window.innerHeight;

  // 根据屏幕高度调整页面元素的大小和位置
  // ...
});

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
  width: 100%;
  height: 100px;
}