Supprimer l'arrière-plan sur des Requêtes de Média

Je veux mon parcours pour aller loin quand un taille de l'écran est remplie.
Voici mon code CSS..

@media only screen and (min-width: 0px) and (max-width: 479px) {
        .videohome { background-image: none; background-color:#fefefe; }
    }

.videohome {
        background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
    }

Puis quand je l'ai vue sur Google Chrome avec une taille d'écran de 479px; le fond est toujours là..

Voici les Inspecter l'Élément,

Inspecter L'Élément -- Google Chrome

www.mysite.com/media="all"
.videohome {
background: url(images/extras/homevideobg.png) repeat-x #e6e6e6;
}
___________________________________

www.mysite.com/media="all"
@media only screen and (max-width: 479px) and (min-width: 0px)
.videohome {
background-image: none;  <-- this part is Striked Through
background-color: #fefefe;  <-- this part is Striked Through
}

Ce que je fais mal? La commande est-elle importante?

L'ordre est important, sinon cela ne marchera jamais. Rappelez-vous, la feuille de style en cascade dans la nature.

OriginalL'auteur Jeremi Liwanag | 2013-10-21

  1. 5

    Oui, la commande du sélecteur(s) est important car la feuille de style est à lire de bas en haut (c'est la cascade de la nature de CSS). Cela signifie que vous aurait lieu à la requête de média CSS ci-dessous la déclaration initiale si vous voulez qu'il soit remplacé.

    Si la modification de l'ordre de la CSS ne résout pas votre problème, alors la question est spécificité. Il suffit d'augmenter la spécificité de la sélection à l'intérieur de la requête de média afin de bien écraser les autres CSS.

    Exemple

    @media only screen and (max-width: 479px) and (min-width: 0px) {
    .videohome {
        background: none;
    }
}
    D'accord. Mettre la déclaration initiale avant toute question, et j'ai l'habitude d'écrire des requêtes dans l'ordre décroissant de leur largeur.
    ainsi, la commande sera le 1er normale css, 2e bureau des médias de la requête, 3e comprimés, 4ème est mobile.
    pouvez-vous les gars vous recommander un bon responsive css tutoriaux??
    href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/" >smashingmagazine.com/responsive-web-design-guidelines-tutorials
    Merci bro! Je vais être occupée dans la lecture de ce.. 🙂

    OriginalL'auteur Josh Crozier

  2. 3

    Souvent, vous aurez à utiliser !important dans la règle dans une requête de média pour remplacer la règle définie en dehors de toute question.

    Par exemple, dans votre requête des médias, essayez ceci:

    .videohome { background-image: none !important; background-color:#fefefe; }

    OriginalL'auteur itsmikem

  3. 2

    Cependant, l'ordre est important. Aussi, assurez-vous que vous n'êtes pas avoir un autre arrière-plan de votre .videohome après tout mediaqueries. DONC mediaqueries généralement toujours passer en dernier. Si les choses se corsent souviens de la !important; mot-clé après toute déclaration css, mais très prudent avec cela qu'il est généralement préférable de ne pas utiliser, sauf si absolument nécessaire.

    OriginalL'auteur Eduardo La Hoz Miranda