1

我的屏幕分辨率为 1240x768，但在我的浏览器中检测到的唯一媒体查询是当我将最小高度设置为 300 像素时，如果我将其设置为大于 300 像素的任何内容，查询似乎无效。这是没有意义的，因为我的浏览器窗口的高度是 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媒体查询位于最底部

4

1 回答 1

4

我敢肯定你不想听到这个，但你肯定需要清理<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-22T06:45:19.120 回答