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
source

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
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
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
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
source