медиазапросов между двумя резолюциями

Question

Я искал, как сделать, что скрытый раздел показывается пользователю, если разрешение его/ее экрана, как это:

если ширина < 1024px и высота < 640px

и минимальная ширина 1440px и высота < 900px

затем показать div.

Я боролся с min-widths, max-height, но не повезло.

Например: @media экрана (макс-ширина: 1023px) и (макс высота: 639px), и (мин-ширина: 1440px) и (макс-высота: 899px)

Но это Безразлично Я работаю, как и ожидалось, пока я его строил.

Любые идеи о том, как достичь этого?

Answer 1

Я использую следующие:

/* ----------- 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){ 
} 

Работает так же хорошо, как золото, если вы используете это в HTML:

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

Регулировка по высоте, и вы должны быть установлены.