Médias Verticaux Requête Ne Fonctionne Pas

La résolution de mon écran est 1240x768 mais la seule requête des médias qui détecte dans mon navigateur est quand j'ai mis le min hauteur de 300px, la requête ne semble pas avoir d'effet si je l'ai mis pour quelque chose de plus grand que 300px. Cela n'a aucun sens parce que mon navigateur est 768px de hauteur.

@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;*/
}
  }

Vous pouvez voir le site ici http://www.wanderfest.com la requête de média est à la fin

InformationsquelleAutor albo | 2013-01-22
  1. 4

    Je suis sûr que vous ne voulez pas entendre cela, mais vous avez certainement besoin de nettoyer le <head> jusqu'. Vous avez beaucoup trop de CSS et de Javascript liens là.

    Je vais mettre que vers le bas pour un environnement de développement, bien que nous allons passer rapidement sur, même si c'est difficile de trouver la requête des médias lorsqu'il y a 28 feuilles de styles à choisir.

    Voici un exemple qui, je l'espère, vous aidera à comprendre les médias verticaux requête: http://codepen.io/justincavery/live/qLJjt

    Ce que je fais est de l'impression de la valeur de la requête de média à travers le :after pseudo-élément.

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

}

    Vous pouvez régler la hauteur du navigateur pour voir les Médias de la requête est en cours de licenciement. Vous êtes à la requête de média doit être de tir quand la hauteur du navigateur est plus que 300px. Je suis désolé je ne peux pas être plus d'aide, mais peut-être si vous avez le lien de la page, cela devrait être naturel et le fichier CSS qui contient la requête, je peux regarder plus loin (j'ai vérifié la source de ces déclarations CSS et je ne pouvais pas trouver un quelconque des éléments mentionnés).

    InformationsquelleAutor justinavery