媒体查询：是否检查最小高度和最小宽度？

Question

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

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

但出于某种原因，这不起作用。我可以检查“最小高度”和“最大宽度”（反之亦然），或者同时检查“最大高度”和“最大宽度”，但检查“最小高度”和“最大宽度”似乎都不起作用。

我应该详细说明这一点：我希望浏览器在最小高度或最小宽度变为真时起作用。仅当两个条件均为真时，使用and运算符才有效。

我做错什么了吗？

Answer 1

在另一个内部使用媒体查询：

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

Answer 2

您是否添加了以下meta标签：

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

这里是参考：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

之后，使用您的媒体查询：

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

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

Answer 3

用和代替逗号，像这样：

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