CSS Breakpoints

Breakpoint für responsive Webseiten und Layout mit kleinen und großen Monitoren in Geräteklassen

Breakpoints sind die Eckdaten, an denen sich das Layout ändert, um sich besser an eine Geräteklasse anzupassen. Sie werden durch Media Queries festgelegt.

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, denn es gibt keine Standard-Templates und auch die großen Frameworks wie Bootstrap und Foundation benutzen unterschiedliche Breakpoints.

Breakpoint Bootstrap
// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Geräteklassen

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

Monitorgrößen als Grundlagen von Breakpoints

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, erste 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 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.

Breakpoint Foundation
/* 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.

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.

Gerätespezifischer Breakpoint
@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.

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)

Responsives Design und Layout in Chrome Developer Tools testen
breakpoints-testen

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.

BREAKPOINTS 360x640 320x534 320x568 480x800 375x667 720x1280 768 x 1024 1024 x 768 1366 x 768 1440 x 900 1260 x 800 1600 x 900 1920 x 1080 Handy Tablet Portrait Tablet Landscape Desktop Große Desktop-Monitore 300 400 500 600 700 800 900 1000 1100 1200 1300 1400 1500 1600 1700 1800 1900 2000 Elements Console