媒体查询:检查最小高度和最小宽度？

Question

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

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

但由于某种原因,这不起作用.我可以同时检查最小高度和最大宽度(反之亦然)或最大高度和最大宽度,但检查两个最小值似乎不起作用.

我应该更多地指定:我希望浏览器在最小高度或最小宽度变为真时起作用.只有两个条件都为真,才能使用和运算符.

难道我做错了什么？

Answer 1

使用and而不是逗号,如下所示:

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

如果两个要求都满足，那么使用and运算符实际上只会激活CSS内容，因此，如果浏览器高度低于500px，宽度低于580px。如果这两种情况均属实，我想激活它。 (2认同)

Answer 2

您是否添加了以下元标记:

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

这是REf: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  screen and  (min-height: 40px)  {
   @media  screen and  (min-width: 50px)  {
    /*enter css here to apply for both condition*/
   }
}