CSS Media Query ne travaille pas dans le fichier css

Ajouté cette ligne dans index.html:

 <link href="css/style.css" media="all  "rel="stylesheet" type="text/css" />

Et c'est ma Requête de Média CSS:

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
     #mapArea .white span {
        width: 100px;
     }

}

Mais quand je vérifie dans le navigateur, ne fonctionne pas. Quel est mon problème? Comment puis-je résoudre ce problème?

(Testé tous les navigateurs modernes)

  • vérifiez la version de votre navigateur. Devrait être plus récente pour tester cette.. CSS 3
  • je vous remercie. Testé tous les navigateurs modernes. Ma principale du navigateur est google Chrome et sa version 27.0.1453.116 m
  • Peut-être que les espaces dans le lien sont à l'origine de problèmes?, essayez <link type="text/css" href="css/style.css">
  • Merci mais ne fonctionne pas.
  • ... f="css/style.css" media="all "rel="styles ... vérifier votre faute de frappe.
  • Sujet : stackoverflow.com/questions/15276218/...

InformationsquelleAutor user2504174 | 2013-06-20
  1. 7

    @media only screen a définition différente avec @media screen.

    Le mot-clé "seulement" peut également être utilisé pour masquer les feuilles de style plus âgés
    les agents utilisateurs. Les agents utilisateurs doivent traiter des requêtes de média en commençant par
    "seulement" comme si " le seul mot-clé n'était pas présent.

    Source: http://www.w3.org/TR/css3-mediaqueries/

    Peut-être que vous pouvez essayer de changer cela: 

    @media screen and (min-width : 320px) and (max-width : 480px) {
  .white span {
      width: 100px;
  }
}
    InformationsquelleAutor Qiqi Abaziz
  2. 13

    Vous interrogez pour device-width, qui si votre sur un ordinateur portable ou de bureau n'est pas un feu de ces requêtes. Changer celui à min-width et vous devriez voir le travail de requête.

    Aussi, assurez-vous d'avoir un viewport de la balise meta c'est à dire <meta name="viewport" content="width=device-width,initial-scale=1.0"> dans le <head> de votre code HTML.

    • La meta tag a été la solution dans mon cas. Eu le même problème - css a été fonctionne correctement sur une seule page, mais ne fonctionne pas sur un miroir de page. RAPPELEZ-VOUS LA BALISE META
    • Oui! Comment se fait-je n'ai jamais vu mention de la balise meta nécessaires dans tous les media queries tutoriels que j'ai lu? Merci beaucoup!
    InformationsquelleAutor Adam Simpson