0

I came across a situation in a project were i wanted to write media queries for iPad Air and iPad Mini separately. What i am wondering is how can i target it differently since their resolutions are overlapping. for example

 @media only screen and (min-width: 768px) and (max-width: 1024px) { //iPad Mini
     .content{
         background-color: grey;
    }
}


 @media only screen and (min-width: 820px) and (max-width: 1180px) { //iPad Air
     .content{
         background-color: blue;
    }
}

What background-color will be applied to the content class for the screen resolution which is between 820px to 1024px since it applies for both the cases? Please correct me if my understanding is wrong. what is the best way to handle such situations? thanks in advance

Sha
  • 1,826
  • 5
  • 29
  • 53

1 Answers1

0

For screen sizes between 820px and 1024px, blue will be applied as the background color. Since both styles would validly apply to an element with class "content", and have the same specificity, the browser will apply whichever style comes last in the stylesheet. Read more here: https://css-tricks.com/precedence-css-order-css-matters/

It is technically possible to detect what device a user is using to browse your website, but only through exploitation of certain bugs, and likely not easily. You certainly can't write a media query that explicitly targets a specific device.

Even if you could easily, I wouldn't recommend it. In general, you should not design for specific devices - you should have a single, responsive design that neatly adapts to many different screen sizes.

If you're just looking for a good set of breakpoints, a common set of non-overlapping breakpoints are the Bootstrap breakpoints. A possibly better thought-out alternative are David Gilbertson's breakpoints.

Unless you have a good reason not to, you should just stick to using only min-width media queries (if your site is designed mobile-first), or just max-width media queries (if your site is designed desktop-first). This way, styles neatly and predictably overwrite each other as screen sizes get larger (in the first case) or larger (in the second case).

Christian May
  • 127
  • 11