Why are my media queries "stepping" on each other?

Question

I'm having a hard time using media queries for the different iPads screens. These are the ones I'm using:

iPad Pro in portrait mode only @media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation : portrait)

iPad 10 in portrait mode only @media only screen and (min-width: 810px) and (max-width: 1080px) and (orientation : portrait)

iPad Air 2 in portrait mode only @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait)

Here's my issue. Let's say I set my background blue for iPad Pro, and a background red for iPad 10. The iPad Pro's background will also be red.

How can I target each iPad specifically?

Answer 1

I think you are having hard time with orientation remove orientation and all works fine.

Check that snippet.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
  }

  body {
    background-color: yellow;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1366px) {
    body {
      background-color: blue;
    }
  }

  @media only screen and (min-width: 810px) and (max-width: 1080px) {
    body {
      background-color: red;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    body {
      background-color: pink;
    }
  }