media-queries

[Rolf B]

Hallo Lydia,

nein, die Reihenfolge ist nicht belanglos, bzw. sie ist unmittelbar vom Konzept deines Seitenaufbaus abhängig.

CSS bildet Prioritäten, die entscheiden, welche Regel Vorrang bekommt, wenn zwei Regeln die gleiche Eigenschaft setzen. Das ist gar nicht so leicht. Unse r Wiki hat einen Artikel zu den Schlüsselbegriffen Kaskade und Spezifität.

TL;DR: Wenn zwei Regeln die gleiche Prio haben, gewinnt die letzte.

Es gibt zwei Vorgehensweisen beim responsiven Design:

Big Screen First

Du designest deine Seite für einen Desktop-Bildschirm und erkennst über Media-Queries, dass der Platz nicht reicht. In den @media Abschnitten fügst Du Styles hinzu, die das Layout auf "schmal" umbauen.

In diesem Fall beginnst Du mit den breiteren Media-Abfragen.

Mobile First

Du designest deine Seite so, dass sie ohne Media-Abfragen auf einem schmalen Bildschirm gut aussieht. Mit @media-Abfragen baust Du das schmale Design in das breite um ; In diesem Fall beginnst Du mit dem schmalerern Media-Abfragen.

Empfohlen ist der Mobile First Ansatz - oder bei anderen Medienmerkmalen - Simple First. Nicht jede Media-Abfrage wird von jedem Browser unterstützt, und du möchtest ja auf einem "schlechteren" Browser dein Layout nicht zerreißen. Deswegen wählt man den Weg, zunächst ein Basislayout zu bauen und dies je nach Endgerät zu verbessern. Stichwort: Progressive Enhancement.

Zum Design von Media-Abfragen gibt es ebenfalls zwei Ansätze: Überlappend und nicht überlappend.

Nicht überlappend:

Du fragst Intervalle ab. Zone 1: (min-width: 30em) and (max-width: 50em), Zone 2: (min-width: 50em). Vorteil: Es gelten nicht so viele Styleregeln gleichzeitig. Bei umfangreichem CSS kann das ein Performancevorteil sein. Nachteil: Du musst ggf. etliche Styles für beide Breitenbereiche doppeln. Und du hast ein Problem: max-width schließt 50em ein, d.h. die Medienabfragen überlappen sich bei genau 50em Breite und Du hast Breite, wo beide Bereiche gelten.

Media Queries Level 4 vereinfachen die nicht überlappende Konstruktion durch die mathematische Formulierung und Bereichsabfragen. Aber die funktionieren noch nicht gut. In Chrome gar nicht, und Firefox kann weder Intervallabfragen noch Abfragen mit dem Wert vor dem Featurenamen.

@media (30em <= width < 50em) {
   ...
}

@media (50em <= width) {
   ...
}

Firefox kann immerhin dies hier:

@media (width >= 30em) and (width < 50em)
   ...
}

@media (50em <= width) {
   ...
}

Überlappend:

Du machst aus der Not eine Tugend und fragst nur mit min-width. Also genau so, wie es in deiner Frage steht. In der breitesten Zone gelten dann alle Media-Abfragen. Vorteil: Die Logik ist nicht so kompliziert und Du musst keine Styles doppeln, die in beiden Bereichen gelten sollen. Nachteil: Du musst in der breiten Zone ggf. CSS Regeln notieren, die Styles aus der mittleren Zone wieder rückgängig machen. Unter dem Strich ist so mehr CSS wirksam und belastet den Browser mehr. Das fällt aber nur auf Seiten mit sehr viel Markup und Styles ins Gewicht.

Rolf