两种分辨率之间的媒体查询答案

【问题标题】：Media queries between two resolutions两种分辨率之间的媒体查询
【发布时间】：2017-02-06 03:28:24
【问题描述】：

如果用户的屏幕分辨率是这样的，我正在寻找如何让隐藏部分显示给用户：

如果宽度

最小宽度 1440px 和高度

然后显示 div。

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

例如： @media screen (max-width: 1023px) and (max-height: 639px), and (min-width: 1440px) and (max-height: 899px)

但它不起作用，正如我在构建它时所预期的那样。

关于如何实现这一目标的任何想法？

【问题讨论】：

“它不起作用”是什么意思？我认为很难拥有 min-width 1440 和 max-height 899 。如果将该查询拆分为 2 个媒体查询会发生什么？
您是否将其包含在您的元标记中？
@adamk22 是的，它有视口的元标记。
@MarcosPérezGude 这意味着它没有显示 div，可能是因为第一条规则，我真的不知道，因为使用该查询它没有显示 div
媒体查询中的 CSS 看起来如何？

标签： css media-queries responsive

【解决方案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">

调整高度，你应该已经设置好了。

【讨论】：

我正在考虑让它这样，但是，如果要显示的 div 的内容总是相同的，那么你就是在重复 CSS 代码。但看起来它不可能是实现它的另一种方式。谢谢！