css - 两种分辨率之间的媒体查询

Question

如果他/她的屏幕分辨率是这样的，我正在搜索如何使隐藏部分显示给用户:

如果宽度 < 1024px 和高度 < 640px

和最小宽度 1440px 和高度 < 900px

然后显示div。

我一直在为最小宽度、最大高度而苦苦挣扎，但在这方面没有运气。

例如:
@media screen (max-width: 1023px) and (max-height: 639px), and (min-width: 1440px) and (max-height: 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">

调整高度，你应该被设置。