媒体查询：检查最小高度和最小宽度？答案

【问题标题】：Media Queries: check min-height and min-width?媒体查询：检查最小高度和最小宽度？
【发布时间】：2013-11-19 03:54:46
【问题描述】：

我正在尝试根据浏览器的最小高度和最小宽度更改页面上的 CSS，所以我使用这个：

@media (min-height: 500px), (min-width: 580px) {
   /* CSS stuff */
}

但由于某种原因，这不起作用。我可以同时检查 min-height 和 max-width（反之亦然）或 max-height 和 max-width，但检查这两个最小值似乎不起作用。

我应该更详细地说明这一点：如果 min-height 或 min-width 变为 true，我希望浏览器采取行动。仅当两个条件都为真时，使用 and 运算符才有效。

我做错了吗？

【问题讨论】：

【解决方案1】：

使用and 代替逗号，如下所示：

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

【讨论】：

使用 and 操作符实际上只会在两个要求都满足的情况下激活 CSS 东西，所以如果浏览器高度低于 500 像素且宽度低于 580 像素。如果这两种情况中的任何一种为真，我想激活它。

【解决方案2】：

您是否在中添加了以下元标记：

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

之后使用您的媒体查询：

@media (min-height: 500px) and (min-width: 580px) {
    /* CSS stuff */
}

有关媒体查询的详细信息，您可以从http://stephen.io/mediaqueries/ 获得所有 iOS 设备的更多信息。如果您有任何其他疑问，请告诉我。即使您也可以从这里获得更好的想法http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

【讨论】：

【解决方案3】：

在其他中使用媒体查询：

@media  screen and  (min-height: 40px)  {
   @media  screen and  (min-width: 50px)  {
    /*enter css here to apply for both condition*/
   }
}

【讨论】：