如何同时考虑响应的宽度和高度？

Question

我尝试将我的网站设置为响应式（使用我首先构建桌面的媒体查询），使用带有 Firefox (f12) 的响应式/自适应模式来查找宽度级别的断点。虽然我认为这很好，但一旦我改变高度或使用 ipad pro 作为模板，我的所有响应都因高度而中断。我觉得奇怪的是，据我所知，媒体查询似乎是基于宽度的，那么如何同时考虑不同的高度？

Answer 1

您可以向媒体查询添加高度要求，如下所示：

<style>
body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) and (max-height: 500px) {
  body {
    background-color: lightblue;
  }
}
</style>