CSS media queries et !important

J'ai un site qui utilise des @media queries, mais il ne semble pas à les définir. Ils ont toujours garder le style par défaut.

Par exemple:

#div1 { background:red}

@media screen and (max-height:912px) {
#div1{background:blue}
}

sera toujours coller avec de fond:rouge à moins que j'utilise !important mais à l'intérieur de mon media queries je suis le style de sorte de nombreux sélecteurs. Dois-je créer pour chaque sélecteur de style !important ?

Votre code fonctionne très bien sur mon système. Je l'ai testé dans Firefox, chrome et safari sur Mac. Qu'est-ce que votre environnement de test?
Désolé pour la réponse tardive. J'ai été à essayer de comprendre pourquoi il ne fonctionne pas. Elle est ici: jsfiddle.net/TUL6h/3 Essayez de faire de la couleur bleu par le redimensionnement. Il n'arrive jamais
Il sera seulement choisir la couleur de ce qui est la dernière dans la section css.

OriginalL'auteur jQuerybeast | 2012-04-21

  1. 8

    J'ai eu le même problème. J'ai réalisé que les requêtes de média doivent être à la fin de feuilles de style (même si vous êtes à l'aide de/l'importation de plusieurs fichiers sur votre flux de travail).

    OriginalL'auteur jhorapb

  2. 3

    Changement de max-hauteur min-height: http://jsfiddle.net/jnQYb/

    Épargnant de vie! Je viens de perdre 3 heures de ma vie à cause de cette

    OriginalL'auteur jQuerybeast

  3. 2

    Il fonctionne très bien pour moi.

    Prendre un coup d'oeil à l': http://jsfiddle.net/TUL6h/1/ - l'arrière-plan est rouge, mais lorsque vous modifiez le résultat de la partie de la hauteur, il change de bleu sur un certain point.

    Quel navigateur êtes-vous essayer?

    Désolé pour la réponse tardive. J'ai été à essayer de comprendre pourquoi il ne fonctionne pas. Elle est ici: jsfiddle.net/TUL6h/3 Essayez de faire de la couleur bleu par le redimensionnement. Il n'arrive jamais
    C'est vrai, mais c'est le bon comportement, parce que background: green remplace background: blue. Vous devriez écrire quelque chose comme ceci: jsfiddle.net/TUL6h/5 pour y parvenir.
    Cela ne fonctionne pas. Cela pourrait-il être un problème de navigateur?

    OriginalL'auteur MarcinJuraszek

  4. 0

    Pas nécessairement, !important est utilisée pour remplacer le css par défaut c'est à dire de remplacer les attributs utilisés dans le style par défaut. Donc, si il ya un nouvel attribut dans les requêtes de média, u ne pas avoir à l'utiliser.

    OriginalL'auteur Teena Thomas

  5. 0

    L'utilisation de la !important à l'intérieur du code contenu dans le @media queries est un moyen efficace pour ajouter de la dynamique des propriétés de style à vos pages les éléments, tout en laissant le "défaut" du css intacte pour un entretien facile.

    Exemple: 

    <html>
<head>
<style>
@media all and (max-width: 768px) {
/* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets)  */
#semantically-named-element p 
{ width: 60% !important;
background: rgba(0,0,255,1)!important;
margin: auto !important; }
#semantically-named-element span 
{ display: none !important; }
} 
/* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */    
/* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */  
#semantically-named-element p 
{ width: 90%;
background: rgba(255,0,0,1);
margin: auto; }
#semantically-named-element span 
{ display: block;
background: rgba(0,0,0,0.8);
color: #FFF;
text-align: center;}  
@media all and (min-width: 968px) {
/* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */
#semantically-named-element p 
{ width: 80% !important;
background: rgba(0,255,0,1)!important;
margin: auto !important; }
#semantically-named-element span 
{ display: block !important;
background: rgba(0,0,0,0.8)!important;
color: #FFF !important; font-size: 200%; }
}
</style>
</head>
<body>
<div id="semantically-named-element">  
<p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p>
</div>  
</body>
</html>

    OriginalL'auteur NicholasAbrams

  6. 0

    À la recherche à votre exemple, //jsfiddle.net/TUL6h/55/:
    Vous avez besoin de changer l'ordre des requêtes de média.
    max-height:510px;
    comprend
    max-height:500px;
    il doit venir en premier dans l'ordre de la plus cas particulier de 500px être affiché à tous.

    jsfiddle.net/TUL6h/55 ne serait pas le mien. Le mien a été créé jusqu'à 5. Le reste sont des utilisateurs autour d'ici.

    OriginalL'auteur emik