垂直媒体查询不起作用

我的屏幕分辨率是1240x768，但在我的浏览器中检测到的唯一媒体查询是当我将最小高度设置为300px时，如果将该查询设置为大于300px的任何内容，查询似乎无效。这是没有意义的，因为我的浏览器窗口高度为768px。垂直媒体查询不起作用

@media only screen and (min-height:300px) { 
    .wanderfest #map-1-container { 
    height: 768px; 
    overflow: hidden !important; 
    position: relative; 
    width : 1560px; 
} 

.map-viewport { 
    border: 1px solid black; 
    /*height: 1170px;*/ 
    margin: 0 0 20px; 
    overflow: hidden; 
    position: relative; 
    /*width: 1350px;*/ 
    height : 768px; 
    width : 1560px; 
} 


/*map size*/ 
#map-1 { 
    cursor: move; 
    width: 2146px; 
    height: 1170px; 
    position: absolute; 
    left: -275px; 
    /*top: -33px;*/ 
} 
    }

您可以在这里看到http://www.wanderfest.com现场的媒体查询是在最底层

来源

2013-01-22 Alex Borsody

我敢肯定，你不想听到这个，但你绝对需要清洁<head>起来。那里有太多的CSS和Javascript链接。

我打算把它放到开发环境中，尽管在有28种样式表可供选择时，它很难找到媒体查询。

这里，我希望让你明白的垂直媒体查询的例子：http://codepen.io/justincavery/live/qLJjt

我在做什么，通过:after伪元素印刷媒体查询的价值。

.container { 
    width: 600px; 
    height: 300px; 
    margin: 5em auto; 
    background: #cc4e46; 
    padding: 3em; 
    color: #333; 
} 

.container:after { 
     font-size: 2em; 

} 
@media (max-height:300px) { 

    .container:after { 
    content: "max-height:300px"; 

    } 

} 

@media (min-height:300px) { 

    .container:after { 
    content: "min-height:300px" ; 
    } 

} 

@media (min-height:400px) and (max-height:600px){ 

    .container:after { 
    content: "(min-height:400px) and (max-height:600px)" 
    } 

} 

@media (min-height:600px){ 

    .container:after { 
    content: "(min-height:600px)" 
    } 

}

您可以调整浏览器的高度以查看正在触发哪个媒体查询。当浏览器的高度超过300像素时，媒体查询应该被触发。对不起，我无法提供更多的帮助，但是如果你链接了应该发生的页面和包含查询的CSS文件，我可以进一步查看它（我检查了CSS声明的源代码，找到任何提到的元素）。

来源

2013-01-22 06:45:19 justinavery

垂直媒体查询不起作用

回答

相关问题