Les Media queries ne fonctionne pas

Personne ne sait pourquoi mes requêtes de média code ne fonctionne pas ?

 <div class="box"></div> 
 .box {
     background-color: red;
     width: 100%;
     height: 50px;
 } 

 @media only screen and (max-device-width: 768px)  {
     .box {border: 5px solid blue;}
 }

http://jsfiddle.net/N9mYU/

OriginalL'auteur user2013488 | 2014-01-29

  1. 8

    Vous utilisez (max-width: 768px) au lieu de (max-device-width: 768px). Voir la différence entre max-device-width/max-width expliqué ici.

    Ajouter une fenêtre si vous voulez la requête de support pour travailler sur des appareils mobiles:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    mise à JOUR de l'EXEMPLE ICI

    @media only screen and (max-width: 768px) {
    .box {
        border: 5px solid blue;
    }
}

    Pour en savoir plus: Un pixel n'est pas un pixel/Fenêtre d'affichage de la largeur et de la largeur de l'écran (mdn)

    OriginalL'auteur Josh Crozier

  2. -1

    Désolé les gars mais cette question est devenu discutable: Firefox Dev edition juste fait une mise à niveau et changé la façon dont les écrans des appareils sont présentés: vous ne pouvez plus sélectionner la taille de l'écran en pixels à l'aide d'une liste déroulante; vous devez maintenant sélectionner le nom de l'appareil qui aura ses dimensions affichées.

    J'ai longtemps eu des problèmes quand Firefox a publié une mise à jour alors que j'ai le navigateur est ouvert.

    La régulière navigateur Firefox avec firebug est maintenant plus réactif. Certains des problèmes que j'ai eu affaire, c'est que lorsque j'ai mis une limite telle que "min-width 320px" FDE effectue le changement à une plus grande min, dire 380px. Cela ne change pas dans l'édition mise à jour.

    Cette question n'est pas devenu sans objet. Vous pouvez toujours redimensionner votre navigateur sans l'aide d'outils de Dev. Ni cette question à poser au sujet de outils de dev. La question d'origine était à cause de max-device-width vs max-width. FF Dev a eu l'appareil déroulante pour quelques versions maintenant.

    OriginalL'auteur etkronberg