Media queries between two resolutions

Question

I was searching how to make that a hidden section shows up to user if the resolution of his/her screen is like this:

if width < 1024px and height < 640px

and min width 1440px and height < 900px

then show the div.

I've been struggling with min-widths, max-heights, but no luck on this.

For example: @media screen (max-width: 1023px) and (max-height: 639px), and (min-width: 1440px) and (max-height: 899px)

But it doesn't work, as expected while I was building it.

Any ideas on how to achieve that?

Answer 1

I'm using the following:

/* ----------- 0 - 450px ----------- */
@media screen 
  and (max-width: 450px){
}

/* ----------- 450 - 650px ----------- */
@media screen 
  and (min-width: 451px) 
  and (max-width: 650px){
}

/* ----------- 650px - 950px ----------- */
@media screen 
  and (min-width: 651px)
  and (max-width: 950px){
}

/* ----------- 950px - 1200px ----------- */
@media screen 
  and (min-width: 951px) 
  and (max-width: 1200px){
}

/* ----------- 1200px + ----------- */
@media screen 
  and (min-width: 1201px){
}

Works as good as gold if you use this in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Adjust for height and you should be set.