Mehrere Medien-Anfragen: max-width oder max-height

Diese Frage ist ähnlich CSS media queries: max-width ODER max-height, aber da meine rep ist nicht hoch genug, ich kann nicht fügen Sie einen Kommentar (Frage) die Antwort, und ich möchte hinzufügen, um die ursprüngliche Frage.

Wie der poster in dem anderen Thema, ich habe media queries mit bestimmten Vorgaben für DIVs.

@media only screen and (min-width:460px){
.center{width:250px;}
}

@media only screen and (min-width:960px){
.center{width:350px;)
}

Nun, ich will den center-DIV zu werden 250px breit, wenn der Bildschirm ist 960px breit, aber nur 400px hoch ist. Wenn ich das set das erste media-query zu diesem:

@media only screen and (min-width:460px), screen and (max-height:400px){
.center{width:250px;}
}

die Abfrage wird mein browser verwenden?
Wird die min-height überstimmen die min-width? Oder wird es überspringen Sie die min-Höhe und gehen auf die min-width-query (960px)?

Ich verwendet habe, Stack Overflow eine Menge Antworten zu finden, aber noch nicht eingestellt haben, Frage also, wenn dieser unvollständig ist, lassen Sie es mich bitte wissen.

- - edit - -
Ich betrat die falsche Bedingung (min-height anstatt der max-Höhe)

InformationsquelleAutor Doc | 2013-12-05
  1. 7

    wird, verwenden ALLE von Ihnen, sobald die Bedingung erfüllt ist. also die Regel für .center würde die Letzte sein, die definiert wird (wie gewohnt in css -, später-Definitionen überschreiben die frühen)

    Aber so wie ich das verstehe, was Sie tun möchten, mit Ihrer Anfrage, wäre es nicht mehr wie

    @media only screen and (min-width:460px) and (max-height:400px){
.center{width:250px;}
}
    • Also sagst du, dass die min-width:460px und max-height:400px Abfrage kommen sollte, NACH dem min-width:960px-Abfrage, um alle Bedingungen? Auch wenn die Breite des Fensters übersteigt 960px?
    • Sie fragte, welche verwendet werden, und ich antwortete, dass alle Bedingungen verwendet werden, wenn Sie übereinstimmen. Wenn Sie wollen mit dem max-Höhe, die wichtigsten zu sein, dann ja, sollten Sie schreiben es die Letzte oder machen die Selektoren in der es wichtiger (Körper .center zum Beispiel)
    InformationsquelleAutor Ria Weyprecht
  2. 5

    ich hoffe, zu verstehen, was u wirklich brauchen, aber für die Verbindung von zwei Regeln, die ich diese syntax verwenden, und diese Arbeit für mich:

    @media only screen and (min-width:460px), (max-height:400px){
   .center{width:250px;}
}
    InformationsquelleAutor rnd
Schreibe einen Kommentar