web-dev-qa-db-fra.com

afficher / masquer div en fonction de la taille du navigateur en utilisant UNIQUEMENT css?

J'essaie d'obtenir des divs à afficher/masquer en fonction de la taille du navigateur, en utilisant uniquement des requêtes multimédias CSS ... mais rien ne semble fonctionner ... s'il vous plaît, aidez-moi si vous le pouvez et faites-moi savoir ce que je fais mal. .. Merci d'avance!

voici mon css ..

@media all and (max-width: 959px) {

    .content .700{display:block;}
    .content .490{display:none;}
    .content .290{display:none;}

}

@media all and (max-width: 720px) {

    .content .700{display:none;}
    .content .490{display:block;}
    .content .290{display:none;}

}

@media all and (max-width: 479px) {

    .content .700{display:none;}
    .content .490{display:none;}
    .content .290{display:block;}

}

et voici mon html

<div class="content">
    <div class="700">this is the content for desktop</div>
    <div class="490">this is the content for tablet</div>
    <div class="290">this is the content for mobile</div>
</div>
cssmedia-queriesmediashow-hide
19
JStormThaKid

le nom de la classe ne peut pas commencer par le chiffre. changez-le par exemple x700, x490, x290 et cela devrait fonctionner

20
Jerzy Zawadzki

class name ne peut pas être un nombre et ne peut pas commencer par un nombre en CSS. Voici un exemple où j'ai changé le nom de la classe et ça marche bien

http://jsfiddle.net/RtTsy/

6
Hushme