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

Posted

技术标签:

【中文标题】媒体查询:检查最小高度和最小宽度?【英文标题】: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 运算符才有效。

我做错了吗?

【问题讨论】:

媒体查询中的逗号就像选择器中的逗号:.foo, .bar color: red @cimmanon Mozilla 指南指定:“逗号分隔列表的行为类似于逻辑运算符或在媒体查询中使用时。” CSS media queries: max-width OR max-height的可能重复 差不多是 4 年前的事了,但就在这个问题的前一年,还有同一个问题……答案:***.com/a/11404776/3279496 【参考方案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">

这里是参考: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

【讨论】:

我实际上已经包含了视口元标记,正如我所说,它适用于 max+max 和 min+max,但不适用于 min+min。【参考方案3】:

在其他中使用媒体查询:

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

【讨论】:

截至 2015 年 1 月,嵌套媒体查询仍未完全支持,它在 IE 和 Safari 中存在问题。

以上是关于媒体查询:检查最小高度和最小宽度?的主要内容,如果未能解决你的问题,请参考以下文章

媒体查询最小宽度在 Opera、FF 和 IE 中未正确触发

使用 css 变量(没有 SASS/LESS)设置媒体查询的最小/最大宽度?

CSS 媒体查询 min-width 和 min-device-width 冲突?

03媒体查询

CSS3 @Media 媒体查询

CSS3 @Media 媒体查询