How to combine two or more media queries for more specific breakpoints

Question

Hey I am trying to make an responsive web and I want to know if you can have a combined media query for special phones with high view ports such as galaxy s23, IPhone 12/13.

I mean we all know that you can have common breakpoints such as @media (width <= 450px)

For mobiles, etc.

But sometimes we have special phones with 372×900 viewport to care of, so I just want to know if there is any option to combine all media queries for kind of similar view ports.

I tried to find some solutions for specific media queries of special phones but it's seems not that smart to define a specific view port to care of.

Answer 1

If you mean targetting screen width and screen height together, you can do that by seperating them with (and) like =>

@media screen and (min-width: 30rem) and (min-height: 60rem) {
   /* … */
}

you can even add more role for screen orientation =>

@media screen and (min-width: 30rem) and (min-height: 60rem) and (orientation: landscape) {
      /* … */
}