Requête De Média Styles De Pas Primordial D'Origine Des Styles

Je suis d'essayer d'utiliser certaines des requêtes de média pour un site que je suis en train de construire. Le problème, je vais avoir cependant, est que, bien que la requête de média styles sont effectivement appliquées, elles sont remplacées. Je ne peux pas pour la vie de me dire pourquoi, parce que je suis en utilisant exactement la même sélecteurs. Quelqu'un peut-il point quelque chose que je ne suis pas voyant?

ORIGINAL CSS

#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;
    }

REQUÊTE DE MÉDIA 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ù j'ai mis la valeur liquidative d'avoir un affichage de aucun. Cependant, lorsque je tente de régler la largeur de #global-wrapper-intérieure à 100%, il ne s'applique pas. Je peux voir le style de "appliquée" lorsque j'appuie sur F12 et sélectionnez cet élément. Cependant, le style lui-même est barré et pas fait appliqué et il a encore de la largeur d'origine de 85%.

InformationsquelleAutor Ben Black | 2013-09-26

css3 media-queries

83

Les sélecteurs dans votre CSS d'origine ont le même la spécificité que les sélecteurs dans vos requêtes de média (les premières déclarations sont aussi visant la même propriété - width) et parce que les médias de la règle de requête est substituée je vais supposer qu'il apparaît avant l'origine de la règle définie.

La deuxième requête de média sélecteur fonctionne parce qu'il est le ciblage d'une propriété qui n'était pas définie dans le CSS, donc, la spécificité n'est pas pertinent.

À la première requête de média sélecteur de préséance, ajouter un élément ancêtre à elle:
```
@media screen and (max-width:1024px) {
    body #global-wrapper-outer > #global-wrapper-inner {
         width: 100%;
    }
    #global-wrapper-outer > #global-wrapper-inner > nav {
        display: none;
    }
}
```
- Ce qu'il était. C'est bon à savoir. Merci beaucoup. Maintenant une question pour vous, si je devais ajouter le <Body> tag et ensuite utiliser la même spécificité plus tard dans un autre media query-à-dire revenir à 85% de la largeur quand elle est sous 768px. Serait-il besoin d'un autre ancêtre ou serait-ce pas un problème puisque vous avez dit que les requêtes de média ont pas de spécificité?
- De zéro à cette question, je l'ai testé et cela a fonctionné comme je le pensais. Pas d'augmentation de la spécificité nécessaire. Merci encore!
- merci man, a parfaitement fonctionné.
- Quelle est la différence entre l'utilisation de votre solution OU en ajoutant des !important dans la requête de média ?
- quelqu'un peut m'expliquer pourquoi vous devez ajouter un élément ancêtre à elle? A-t-elle à être un ancêtre de l'élément ou peut-elle être un élément au même niveau?
- Vous devez ajouter un élément ancêtre sur elle parce que cet élément rend plus spécifiques. Vous pourriez faire un élément frère ainsi, il doit juste être quelque chose qui le rend plus précis que l'autre règle. Bien sûr, cela pourrait être résolu en ayant les requêtes de média apparaissent après la non-media CSS.
- Grand. Les travaux de cette. Je ne savais pas à propos ajoutant un élément ancêtre pour le rendre plus précis. Merci pour ça 🙂
InformationsquelleAutor Adrift
3

Vous devez lier les médias fichier de requêtes (requêtes.css) plus tard que la normale fichier css (style.css). De cette façon, les règles dans les requêtes.css remplacent celles dans le style.css.

InformationsquelleAutor Sameer Khanal
1

J'ai été au moins 2 heures à essayer de trouver le remplacer CSS problème jusqu'à ce que je trouve que mes commentaires en ligne où mal... Et la deuxième définition de la CSS ne fonctionnait pas:

Alors, ne soyez pas si stupide que je !:
```
/* 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! */
```
- l'heure de passer à SCSS 🙂
InformationsquelleAutor gtamborero
-1

Que sur l'utilisation de !important? Si vous gamme votre requête des médias de ( min-width: 176px ) et ( max-width: 736px ) ou même jusqu'à 980px?
- À l'aide de !important est surfait. Ce n'est pas vraiment une bonne façon de traiter avec les remplacements.
InformationsquelleAutor Jamie JKMedia

Vous devez vous connecter pour publier un commentaire.