Question

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

@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媒体查询位于最底层

Answer 1

我确定你不想听到这个，但你肯定需要清理<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)" 
  }

}

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

垂直媒体查询不起作用

1 个答案: