web-dev-qa-db-fra.com

Requêtes multimédia - Entre deux largeurs

J'essaie d'utiliser des requêtes de média CSS3 pour créer une classe qui n'apparaisse que lorsque la largeur est supérieure à 400 pixels et inférieure à 900 pixels. 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 je suis venu avec est le code ci-dessous, apprécier toute aide.

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

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

223
Sampson

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

Vous devriez utiliser ( min-width en premier ):

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

je voulais juste laisser mon exemple .scss ici, je pense que c'est un peu la meilleure pratique, surtout si vous faites la personnalisation, il est agréable de régler la largeur une seule fois! Il n'est pas intelligent de l'appliquer partout, vous augmenterez le facteur humain de manière exponentielle.

Je suis impatient de recevoir 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;
   }
}
3
JasParkety