webentwicklung-frage-antwort-db.com.de

Medienabfragen - Zwischen zwei Breiten

Ich versuche, mithilfe von CSS3-Medienabfragen eine Klasse zu erstellen, die nur angezeigt wird, wenn die Breite größer als 400 Pixel und kleiner als 900 Pixel ist. Ich weiß, dass dies wahrscheinlich extrem einfach ist und mir etwas Offensichtliches fehlt, aber ich kann es nicht herausfinden. Was ich mir ausgedacht habe, ist der folgende Code, danke für jede Hilfe.

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

Sie müssen Ihre Werte ändern:

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

Demo: http://jsfiddle.net/xf6gA/ (mit Hintergrundfarbe, so ist es einfacher zu bestätigen)

223
Sampson

@ Jonathan Sampson Ich denke, Ihre Lösung ist falsch, wenn Sie mehrere @ media.

Sie sollten zuerst ( min-width ) verwenden:

@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

ich wollte nur mein .scss - Beispiel hier belassen, ich denke, es ist eine Art bewährte Methode, insbesondere, wenn Sie Anpassungen vornehmen, ist es schön, die Breite nur einmal einzustellen! Es ist nicht klug, es überall anzuwenden, Sie werden den menschlichen Faktor exponentiell erhöhen.

Ich freue mich auf Ihr Feedback!

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