Requêtes multimédias - Entre deux largeurs

141

J'essaie d'utiliser des requêtes multimédias CSS3 pour créer une classe qui n'apparaît que lorsque la largeur est supérieure à 400px et inférieure à 900px. Je sais que c'est probablement extrêmement simple et qu'il me 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;
    }
}
css media-queries russellsayshi
la source

Réponses:

270

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, il est donc plus facile de confirmer)

Sampson
la source
4
max-widthet min-widthdevrait être inversé. cette façon est plus lisible
machineaddict
33

@Jonathan Sampson Je pense que votre solution est erronée si vous utilisez plusieurs @media .

Vous devez utiliser ( largeur min en premier ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}
WalkerNuss
la source
10
La réponse acceptée n'est en aucun cas fausse, mais je pense que l'utilisation de min-width à max-width est une convention plus claire et lisible.
Dave Powers
1
D'accord avec @DavePowers. Dans mon cas, j'avais ma requête média formatée comme @WalkerNuss, mais j'avais oublié la première andaprès @media screen. L'insertion du premier a andcorrigé cela pour moi.
Kyle Vassella
4

Je voulais juste laisser mon .scssexemple ici, je pense que c'est un peu la meilleure pratique, surtout je pense que si vous faites de la personnalisation, c'est bien de ne définir la largeur qu'une seule fois! Ce n'est pas malin de l'appliquer partout, vous augmenterez le facteur humain de façon exponentielle.

Im attend avec impatience vos commentaires!

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}
JasParkety
la source
Si vous avez utilisé les paramètres dans le mixin il peut s'agir d'une "fonction" ...
1984
3 

.class {
    display: none;
}
@media (min-width:400px) and (max-width:900px) {
    .class {
        display: block; /* just an example display property */
    }
}
Développer l'extrait

Charlie
la source