Medienabfragen - Zwischen zwei Breiten

141

Ich versuche, CSS3-Medienabfragen zu verwenden, um 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 sehr einfach ist und mir etwas Offensichtliches fehlt, aber ich kann es nicht herausfinden. Was ich mir ausgedacht habe, ist der folgende Code. Schätzen Sie jede Hilfe.

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

Antworten:

268

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, daher einfacher zu bestätigen)

Sampson
quelle
4
max-widthund min-widthsollte umgekehrt werden. Dieser Weg ist besser lesbar
machineaddict
33

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

Sie sollten verwenden ( min-width zuerst ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}
WalkerNuss
quelle
10
Die akzeptierte Antwort ist keineswegs falsch, aber ich denke, dass die Verwendung von Min-Breite bis Max-Breite eine klarere, lesbarere Konvention ist.
Dave Powers
1
Stimmen Sie mit @DavePowers überein. In meinem Fall hatte ich meine Medienabfrage wie @WalkerNuss formatiert, aber die erste anddanach vergessen @media screen. Das Einfügen des ersten hat anddies für mich behoben.
Kyle Vassella
4

.scssIch wollte nur mein Beispiel hier lassen, ich denke, es ist eine bewährte Methode, besonders 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;
   }
}
JasParkety
quelle
Wenn Sie die Parameter im Mixin verwendet haben, kann es sich um eine "Funktion" handeln ...
1984
3 

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

Charlie
quelle