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)" 
  }

}

ブラウザの高さを調整して、どのメディアクエリが実行されているかを確認できます。ブラウザの高さが300pxを超えると、メディアクエリが起動するはずです。申し訳ありませんが、これ以上お役に立てることはありませんが、ページをリンクすると、これが発生するはずであり、クエリを含むCSSファイルをさらに調べることができます（これらのCSS宣言のソースを確認しましたが、できませんでした上記の要素のいずれかを見つけます）。

于 2013-01-22T06:45:19.120 に答える