Media Queries – Entre deux largeurs

J’essaie d’utiliser les requêtes de support CSS3 pour créer une classe qui n’apparaît que lorsque la largeur est supérieure à 400 pixels et inférieure à 900 pixels. Je sais que c’est probablement extrêmement simple et je manque quelque chose d’évident, mais je ne peux pas le comprendre. Ce que j’ai trouvé est le code ci-dessous, appréciez toute aide.

@media (max-width:400px) and (min-width:900px) { .class { display: none; } } 

Vous devez changer vos valeurs:

 /* No greater than 900px, no less than 400px */ @media (max-width:900px) and (min-width:400px) { .foo { display:none; } }​ 

Démo: http://jsfiddle.net/xf6gA/ (en utilisant la couleur d’arrière-plan, donc plus facile à confirmer)

@ Jonathan Sampson Je pense que votre solution est fausse si vous utilisez plusieurs @media .

Vous devez utiliser ( min-width d’abord ):

 @media screen and (min-width:400px) and (max-width:900px){ ... } 
 .class { display: none; } @media (min-width:400px) and (max-width:900px) { .class { display: block; /* just an example display property */ } }