web-dev-qa-db-fra.com

Styles de requête multimédia ne remplaçant pas les styles d'origine

J'essaie d'utiliser certaines requêtes des médias pour un site Web que je construis. Le problème que je rencontre cependant est que, bien que les styles de requête multimédia soient appliqués, ils sont remplacés. Je ne peux pas dire pourquoi, parce que j'utilise les mêmes sélecteurs. Quelqu'un peut-il signaler quelque chose que je ne vois pas?

CSS ORIGINAL 

#global-wrapper-outer > #global-wrapper-inner {
    width: 85%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}
    #global-wrapper-outer > #global-wrapper-inner > nav {
        background: #fff;
        padding-bottom: 20px;
        box-shadow: 0 4px 2px -2px gray;
    }

MEDIA QUERY CSS 

@media screen and (max-width:1024px) {
    #global-wrapper-outer > #global-wrapper-inner {
        width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}

La deuxième requête de média fonctionne bien, où je règle le nav pour n’avoir aucun affichage. Cependant, lorsque j'essaie de définir la largeur de # global-wrapper-inner à 100%, cela ne s'applique pas. Je peux voir le style "appliqué" lorsque j'appuie sur F12 et que je sélectionne cet élément. Cependant, le style lui-même est barré et non en fait appliqué et il a toujours la largeur d'origine de 85%.

css3media-queries
43
Ben Black

Les sélecteurs de votre CSS d'origine ont la même spécificité que les sélecteurs de vos requêtes multimédia (les premières déclarations visent également la même propriété - width) et parce que le jeu de règles de requête multimédia est remplacé supposer qu'il apparaît avant le jeu de règles d'origine.

Le deuxième sélecteur de requête multimédia fonctionne car il cible une propriété qui n'était pas définie dans votre CSS d'origine. Par conséquent, la spécificité n'est pas pertinente. 

Pour que le premier sélecteur de requête multimédia ait priorité, ajoutez-y un élément ancêtre:

@media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}
79
Adrift

Vous devez lier le fichier de requête multimédia (queries.css) à une date ultérieure au fichier css normal (style.css). De cette façon, les règles de queries.css remplaceront celles de style.css.

2
Sameer Khanal

Pendant au moins deux heures, j'ai essayé de trouver le problème de substitution des CSS avant de constater que mes commentaires de ligne étaient erronés ... Et la deuxième définition de CSS ne fonctionnait pas:

Alors, ne sois pas aussi stupide que moi!

/* LITTLE SCREENS */ 

@media screen and (max-width: 990px) {
    ... whatever ...
}

/*  BIG SCREENS */ 

@media screen and (min-width: 990px) {
    ... whatever more ...
}

ne jamais utiliser: Double barre comme je l'ai fait:

// This is not a comment in CSS!

/* This is a comment in CSS! */
1
gtamborero

Qu'en est-il d'utiliser !important? Si vous adaptez votre requête multimédia à partir de ( min-width: 176px ) et ( max-width: 736px ) ou même jusqu’à 980px?

0
Jamie JKMedia