CSS Breakpoints

Mobile First

Jeder Blick in die Verteilung von Monitorgrößen ist ein Blick in eine Glaskugel, denn es gibt keine Monitorgröße, die es nicht gibt. Die kniffelige Frage lautet, bei welcher Breite die Breakpoints das Layout schalten und anpassen sollen. Es gibt keine Standard-Templates und auch die großen Frameworks wie Bootstrap und Foundation benutzen unterschiedliche Breakpoints.

Mobile First – zuerst an die kleinen mobilen Geräte denken – ist die wichtigste Devise des Webdesigns. Und wir brauchen keinen Breakpoint für jede Geräteklasse.

Quelle: Bootstrap 5.0 Breakpoints

Und es muss auch nicht immer eine der großen CSS-Libraries sein: Die modernen Browser bringen mit CSS clamp() mehr Flexibilität ins Layout und reduzieren Breakpoints mit sichtbaren Bruchstellen und Sprüngen.

Geräteklassen

Auf jeden Fall aber lassen sich ViewPorts und Monitorgrößen in Gruppen aufteilen, dann haben wir Geräteklassen.

Gleichzeitig erkennt wir schon, dass Diskussionen über die »richtigen« Breakpoints und die Frage: »Wie viele Breakpoints« wenig bringen. Welche Breakpoints und wohin damit ist ein bewegliches Ziel.

Breakpoints mit min-width organisieren

Media Queries für Breakpoints können sowohl mit min-width oder max-width oder einer Kombination aus beiden Abfragen festgelegt werden.

min-width basierte Breakpoints sind »Mobile First«. Alles was nicht innerhalb einer @media-Regel für den Start einer Monitorbreite festgelegt wird, sind universelle Stile für alle Monitorbreiten und zielen auf die kleinsten Geräte (zumeist auf Smartphones) ab. Hier liegen die Inhalte der Seiten sequentiell in einer Spalte. Von hier aus legen weitere Breakpoints die CSS-Eigenschaften für größere Viewports fest.

<style>
/* Universelle CSS-Regeln für alle Monitore */
       
body { font-family: Helvetica, sans-serif; }

@media screen and (min-width:450px) {
/* Bei jedem größeren Monitor kommen neue Regeln hinzu */
   body { line-height: 1.5; }
}

@media screen and (min-width:720px) {
/* Noch größer, noch mehr Regeln */
   body { color: firebrick; }
}
</style>

Alle folgenden Media Queries überschreiben bei min-width nur die Eigenschaften, die sich bei einem Breakpoint ändern oder neu hinzukommen.

Einteilung mit max-width

Breakpoints mit max-width beginnen mit dem Layout für den größten Monitor, also beim Design für den Desktop, und überschreiben nach und nach Stile, um die Seiten an immer kleinere Monitore anzupassen.

<style>
/** Universelle Regeln, erstes Ziel ist der Desktop-Monitor **/
body {
   color: firebrick; line-height: 1.5;
   font-family: Helvetica, sans-serif;
}

@media screen and (max-width:720px) {
/* Zusätzliche Regeln für kleinere Monitore  */
   body { color: #000; }
}

@media screen and (max-width:450px) {
   /* Zusätzliche Regeln noch kleinere Monitore  */
   body { line-height: 1.2} 
}
</style>

Breakpoints auf max-width müssen vom größten zu kleinsten Viewport aufgeführt werden, wobei die universellen Stile zuerst aufgeführt werden.

Den goldenen Weg gibt es nicht. min-width ist intuitiver und besser lesbar, der max-width-Ansatz eignet sich besser, ein altes nicht-responsives Design zügig an verschiedene Monitorklassen anzupassen.

max-width und min-width

Es kann auch sinnvoll sein, die Media Queries für das Layout mit max-width anzufangen und mit min-width fortzufahren. Dann erfasst der erste Breakpoint mit max-width alle Viewports unterhalb einer bestimmten Größe, aber die speziellen Eigenschaften für die kleinste Geräteklasse müssen nicht aufwendig für größere Viewports zurückgesetzt und überschrieben werden.

Auch die Breakpoints des Foundation-Frameworks sind Mobile First, obwohl der erste Breakpoint mit max-width vorliegt. max-width fängt die Besonderheiten besonders kleiner Viewports ab.

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

…

In Small only landet z.B. die Hamburger-Navigation für kleine Monitore, Medium and up beginnt frisch und ohne Belastung mit der Navigation für größere Monitore.

So könnte man z.B. kleine Monitore in max-width unterbringen, große in min-width, und muss für die großen Monitore nichts überschreiben (was immer kniffelig sein kann). Gleichzeitig bekommen Tabletts schon ein paar Extras.

@media (max-width: 979px) {
}

@media (min-width: 580px) and (max-width: 979px) {
}

@media (max-width: 980px) {
}

Jetzt gilt weiterhin: Für die größeren Monitore muss kein zuvor gesetztes CSS überschrieben werden. Änderungen für kleine Monitore beeinflussen das CSS der größeren Monitore nicht.

Media Queries und Breakpoint mit range festlegen

Neben min-width und max-width kann die Media Query in den modernen Browsern auch mit range eingesetzt werden.

/** Bei einer Breite des Viewports zwischen 720px und 1260px **
@media (min-width: 720px) and (max-width: 1260px) {
	.block {
		…
	}
}

Mit Booleschen Operatoren für Breakpoints kommen Media Queries Programmierern entgegen. Die Schreibweise ist kürzer:

@media (720px <= width <= 1260px) {
	.block {
		…
	}
}

Breakpoint Orientation

Das Testen des Layouts ist mit dem Monitor am Desktop-Rechner ein einfaches Spiel im Vergleich zu den Tests auf den mobilen Geräten. Während wir die Größe des Browserfensters durch Aufziehen und Verkleinern ändern können, müssten wir mindestens zwei, drei Handys in verschiedenen Größen testen und dürfen die Ausrichtung des Handys nicht außer Acht lassen.

Wenn der Benutzer das Handy dreht, müssen Schriftgrößen, Bildgrößen und das Layout u.U. angepasst werden. Diese Abfrage regelt orientation: landscape (Querformat) bzw. orientation: portrait (Hochformat).

@media only screen and (orientation: landscape) {

}

Breakpoints am Inhalt oder an Geräteklassen ausrichten

Mit dem Auftreten des iPhones und seiner ersten Konkurrenten, und noch einmal beim Erscheinen des iPads wurden die Breakpoints im Design an die neuen Geräteklassen angepasst. Fakt ist, dass wir das heute nicht mehr brauchen, nicht können und nicht mehr nötig haben.

@media only screen 
   and (min-device-width: 375px)
   and (max-device-width: 667px)
   and (-webkit-min-device-pixel-ratio: 2)
   and (orientation: portrait) {
}

Die Menge der Viewportgrößen ist unüberschaubar geworden und wir ändern die Breakpoints nicht, weil ein Samsung Galaxy S9 oder das 9,7" iPad von Apple mit neuen Abmessungen und noch mehr Retina auf dem Markt erscheint, sondern um eine neue Komponente des Layouts (z.B. ein Karusell) auf kleinen Viewports komfortabel zum Benutzer zu transportieren.

Anders als beim Erscheinen von iPhone und iPad haben wir heute zuverlässige Mittel, um Design-Elemente an beliebige ViewPorts und Monitorgrößen anzupassen: display flex und display grid sowie img srcset für alternative Bildgrößen je nach Viewport und Auflösung.

Breakpoints testen

Alte Handys und Tablets fallen jetzt also nicht mehr Nichten und Neffen in die Hände, sondern werden für die aufwändigen Tests des Layouts gebraucht.

Damit nicht gleich eine ganze Batterie mobiler Geräte den Schreibtisch bevölkern muss, helfen die Simulatoren der Hersteller. Unter Mac OS bringen die Developer Tools (XCode – Entwicklungswerkzeuge) von Apple eine Simulation der gegenwärtigen und vergangenen iPhones, iPads bis hin zur Apple Watch, für Android-Geräte gibt Android Studio einen Einblick in die Darstellung auf verschiedenen Geräten (XCode und Android Studio für Mac-Benutzer).

XCode gibt es nur für Mac OS. Die Alternative ist Browserstack.

Die wichtigste Anweisung im head der Seite ist

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

Ohne Meta Viewport würde das Layout der Webseiten auf Desktop-Monitoren zwar schön zusammenklappen, aber die Viewports der mobilen Geräte würden ohne Meta Viewport die Seiten ohne Anpassung verkleinern, damit sie auf den Monitor passen.

Während der Entwicklung helfen schon die Chrome-Entwicklertools (oben rechts unter den drei Punkten am Ende: Weitere Tools ▶ Entwicklertools)

Im Test für responsives Design lassen sich nicht nur Monitorgrößen testen, die Chrome für die Eckdaten von mobilen Geräten und Desktop-Monitore hält, sondern kann jede beliebige Größe eintragen. Auf diese Weise lassen sich auch Breakpoint für Monitore testen, die größer sind als der Monitor des Designers.