Allgemeine Frage zu Media_Queries

[Auge]

Hallo

Du hast ja schon einige Hinweise bekommen. Mir fiel noch folgendes auf.

@media screen and (min-width: 320px) {}

@media screen and (min-width:320px) and (max-width:750px) {}

@media screen and (min-width:750px) and (max-width:1024px) {}

@media screen and (min-width:1024px) {}

An den mittleren Breakpoints werden unnötigerweise die Regeln eines Regelsatzes mit denen des anderen überschrieben. Ich gehe davon aus, dass die später im Quelltext notierten Regeln angewendet werden. Die an diesen Stellen konkurrierenden Mediaqueries könnten aber dafür sorgen, dass der Browser nicht weiß, welchem Query er folgen soll. Wenn du nur mit min-width arbeitest, werden ab dem Breakpoint einfach die „neuen“ Regeln in Kraft gesetzt.

Man muss dabei aber darauf achten, Regeln, die für breitere Viewports ungültig werden sollen, explizit zu überschreiben. Das System lässt sich mMn später dennoch einfacher pflegen. Das gilt insbesondere, wenn alle Regeln in einer Datei gefasst werden. Die eingesparten Requests für die nicht zusätzlich zu ladenden Dateien seien an der Stelle nicht verschwiegen.

Desweiteren stellt sich mir die Frage nach Viewports, die schmaler sind als 320px. Das mag in der Praxis selten vorkommen, die Frage lässt sich aber einfach vermeiden, wenn die grundsätzlich Regeln und jene, die für schmale Viewports gelten, ohne Media-Query notiert werden.

Folgendes bleibt übrig ^[1].

/* Allgemeine Regeln und Regeln für schmale Viewports. */

@media screen and (min-width:750px) {
    /* Regeln für mittelbreite Viewports.
       Regeln für schmale Viewports bei Bedarf überschreiben! */
}

@media screen and (min-width:1024px) {
    /* Regeln für breite Viewports.
       Regeln für schmale und mittelbreite Viewports bei Bedarf überschreiben! */
}

Noch ein Tip. Du kannst für bestimmte Elemente andere Breakpoints definieren. So könntest du z.B. mit den obigen Queries den Hauptinhalt der Seiten anders anordnen, die Darstellung der Navigation aber bei anderen Breiten/Höhen unabhängig von der Anordnung des Hauptinhalts ändern.

Tschö, Auge

---

1. Den Hinweis auf die Verwendung von em statt px für die Breitenangaben hast du ja schon von Matthias bekommen. Den muss ich jetzt nicht nochmal bringen. ↩︎