how to take into account both the width and the height for the responsive?

Question

I tried to put my site in responsive (with medias queries i built desktop first), using the responsive/adaptive mode with firefox (f12) to find the breakpoint at the level of the widths. While I thought it was good, as soon as I change the height or use an ipad pro as a template all my responsive is broken becasue of height. What I find strange since in my knowledgethe, the media queries seem to be based on the widths, so how to take into account also the different heights?

Answer 1

You can add height requirements to your media queries, like this:

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

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