Für die Darstellung einer Webseite auf mobilen Endgeräten sind Breakpoints unerlässlich. Die Definition erfolgt im CSS und wird über sog. @Media festgelegt. Sie lassen sich zwar auf den Pixel genau festlegen, aber sie haben auch ihre Tücken.
Komplexes Design – Komplexe Regeln
Wie viele Breakpoints man setzt ist jedem selber überlassen und ist abhängig von der Komplexität des Design. Hat man viele Elemente die auf einem Monitor in zwei oder drei Spalten angezeigt werden, muss man sich Gedanken machen wann die Spalten für Smartphone & Co ggf. umbrechen sollen.
Dazu muss man sich nur die Frage stellen ob die Inhalte auf dem Smartphone vernünftig lesbar sind oder nicht. Ist die Antwort nein, muss das Problem mit der passenden Regel und den entsprechenden Breakpoints im CSS gelöst werden.
@Media Typ der Breakpoints definieren
Für die Definition der Breakpoints im Stylesheet stehen drei verschiedene Typen zur Auswahl. Mit ihnen wird festgelegt worauf die Regeln „reagieren“. Insgesamt stehen 3 Media Types zur Verfügung – All (default), Screen und Print. Ist der Typ nicht mit @media angegebenen (Screen oder Print), ist die Regel quasi global und wird für alle Typen angewendet.
Media Queries dimensionieren
Damit die angegebenen Breakpoints im Stylesheet auch Wirkung zeigen, müssen die entsprechenden Media Queries einen Wert für die min, max oder genauen Breite (z.B. in Pixeln) enthalten.
Ist dieser Wert erreicht, reagiert die entsprechende Regel im und wird ausgeführt. Sind die Breakpoints im Stylesheet zum Beispiel mit min-width: 500px angegeben, reagiert die Regel erst ab einer Breite von mindestens 500px bis unendlich.
Übersicht und Kontrolle im CSS behalten
Media Queries können zwar auf den Pixel genau angegeben werden, aber trotzdem sind Überschneidungen bei einzelnen Breakpoints kaum auszuschließen und das macht sie ein bisschen tückisch.
Um die Übersicht zu behalten kann es hilfreich sein @media Definitionen am Ende des CSS im Stylesheet zu notieren und betroffene Klassen zu bündeln.
Zusätzlich können Media Queries mit einem weiteren Attribut versehen werden, der orientation. Sie hat zwei Optionen, landscape (Querformat) und portrait (Hochformat). Zusammen mit einer min und max Breite UND der orientation werden dann auch sehr spezielle Kombinationen denkbar. Zum Beispiel: Wenn Weite min 500px & max 900px & landscape, dann color = Grün.
Derartigen Kombinationen sollten eher eine Ausnahme sein. Sie machen das CSS schnell unübersichtlich und können mehr Probleme verursachen als sie zu lösen.
Sinnvolle Grenzen setzen
Im allgemeinen sollte man auf das aus definieren von Einzelfällen weitestgehend verzichten. Ist das nicht möglich kann man über spezielle Kind-Klassen das Design zu beeinflussen und kommt damit ans Ziel.
Wer es genauer wissen möchte, dem kann ich die Webseite von Selfhtml zu dem Thema Breakpoints empfehlen. Die Information sind gut gegliedert und sehr umfangreich.
Deine Meinung zu dem Beitrag!
Du hast zusätzliche Informationen, Anregungen und Ergänzungen zu diesem Thema oder einen Fehler gefunden? Dann lass es mich wissen, ich freue mich über einen Kommentar von dir. Wenn du diesen Beitrag als wichtig empfindest, kannst du ihn auch gerne weiterempfehlen. Jede Unterstützung ist willkommen.