Breakpoint-Strategie für unterschiedliche Bildschirmgrößen

Stellen Sie sich vor, Sie gestalten eine Website: Auf Ihrem Desktop-Bildschirm sieht alles makellos aus, die Buttons sitzen genau richtig, die Textspalten sind ausgewogen, die Bilder gestochen scharf. Dann öffnen Sie dieselbe Seite auf einem Smartphone und das Layout zerfällt; Texte laufen über, Buttons überlappen sich, eine horizontale Scrollleiste taucht auf. Genau das Konzept, das dieses Chaos verhindert, heißt Breakpoint. Ein Breakpoint ist die Schwelle, an der ein Design sein Layout bei einer bestimmten Bildschirmbreite ändern muss. Eine richtig durchdachte Breakpoint-Strategie sorgt dafür, dass Ihre Website vom Smartphone bis zum Tablet, vom Notebook bis zum riesigen Monitor auf jedem Gerät konsistent und benutzerfreundlich aussieht.

Viele Entwicklerinnen und Entwickler legen Breakpoints zufällig fest oder ahmen die Auflösungen populärer Geräte nach. Doch dieser Ansatz verliert zunehmend an Bedeutung; denn auf dem Markt gibt es Tausende verschiedener Bildschirmgrößen und keine feste Liste reicht aus, um sie alle abzudecken. Stattdessen empfiehlt modernes Webdesign, zu beobachten, wo der Inhalt selbst "bricht", und die Entscheidung danach zu treffen. In diesem Artikel behandeln wir anhand praktischer Beispiele, wie Sie eine Responsive-Breakpoint-Strategie von Grund auf aufbauen, welche Werkzeuge Sie einsetzen und welche Fallen Sie vermeiden sollten.

Unser Ziel ist es nicht, Ihnen eine auswendig gelernte Liste nach dem Motto "Verwende diese Pixelwerte" zu geben, sondern Ihnen einen soliden Denkrahmen zu vermitteln. Sie werden Schritt für Schritt sehen, was Sie hinterfragen sollten, bevor Sie eine Media Query schreiben, warum der Mobile-First-Ansatz nach wie vor der sicherste Weg ist und wie moderne CSS-Funktionen den Bedarf an Breakpoints verringern. Wenn Sie bereit sind, bringen wir das Chaos der Bildschirme in Ordnung.

Was ist ein Breakpoint und warum ist er wichtig?

Ein Breakpoint ist, schlicht definiert, der Punkt, an dem ein Design seine Stile ändert, sobald eine bestimmte Breite (oder manchmal Höhe) erreicht wird. In der Regel wird er in CSS mit einer Media Query definiert. Eine Regel wie "Zeige das Menü horizontal, wenn die Bildschirmbreite über 768 Pixel liegt, und wechsle zum Hamburger-Menü, wenn sie darunter fällt" erzeugt zum Beispiel einen Breakpoint bei 768 Pixeln.

Die Bedeutung von Breakpoints liegt unmittelbar im Herzen der Nutzererfahrung. Egal mit welchem Gerät jemand Ihre Website besucht, er erwartet, dass der Inhalt lesbar, die Navigation einfach und die Interaktion reibungslos ist. Falsch platzierte oder fehlende Breakpoints führen zu folgenden Problemen:

• Zu lange oder zu schmale Textzeilen (das beeinträchtigt die Lesbarkeit)
• Touch-Ziele, die zu klein oder zu eng sind, um sie mit dem Finger auszuwählen
• Bilder, die unverhältnismäßig groß werden oder verzerren
• Eine horizontale Scrollleiste, die ungewollt auftaucht
• Abstände, die sich ungleichmäßig verteilen, sodass die Seite "kaputt" wirkt

Breakpoints sollten auch unter dem Gesichtspunkt der Performance betrachtet werden. Eine gut entworfene Strategie reduziert unnötige CSS-Last und komplizierte Korrekturen. Eine schlechte Strategie führt dazu, dass Sie für jedes Gerät einzelne Flicken schreiben und am Ende eine schwer wartbare, aufgeblähte Stildatei erhalten. Breakpoint-Entscheidungen sind daher nicht nur visuelle, sondern zugleich architektonische Entscheidungen.

Geräte-Breakpoint oder Inhalts-Breakpoint?

Der traditionelle Ansatz band Breakpoints an Gerätekategorien wie "Smartphone", "Tablet" oder "Notebook". Diese Logik funktionierte einst, weil die Gerätevielfalt begrenzt war. Heute sieht die Lage ganz anders aus: Es gibt faltbare Smartphones, ultrabreite Monitore, Notebooks mit halb geöffnetem Browserfenster und Tablets in allen Größen. Eine feste Breite namens "Tablet" zu definieren, ist nicht mehr realistisch.

Der moderne Ansatz besteht darin, den Breakpoint nicht am Gerät, sondern am Inhalt auszurichten. Sie stellen also Fragen wie "Wird diese Textspalte schwer lesbar, wenn sie schmaler wird?" oder "Bricht dieses Kartenlayout, wenn es enger zusammenrückt?" und setzen den Breakpoint genau dort, wo der Bruch beginnt. Dieser Ansatz beseitigt den Zwang, vorhersagen zu müssen, welches Gerät als Nächstes erscheint, und macht das Design zukunftssicherer.

Die Grundlagen des Mobile-First-Ansatzes

Das Rückgrat Ihrer Breakpoint-Strategie sollte die "Mobile-First"-Philosophie bilden. Bei diesem Ansatz schreiben Sie Ihre Basisstile für den kleinsten Bildschirm und fügen anschließend mit min-width-Media-Queries Schichten hinzu, je größer der Bildschirm wird. Der umgekehrte Weg, also zuerst den Desktop zu gestalten und ihn dann mit max-width zu verkleinern (Desktop-First), führt in der Regel zu fragileren und schwerer wartbaren Ergebnissen.

Die Vorteile des Mobile-First-Ansatzes sind konkret:

1. Performance: Kleine Geräte laden nur die Basisstile, die sie wirklich brauchen; schwere Desktop-Layouts kommen in zusätzlichen Schichten hinzu.
2. Zwang zur Priorisierung: Auf einem schmalen Bildschirm zu arbeiten zwingt Sie dazu, die wichtigsten Inhalte zu bestimmen und in den Vordergrund zu rücken. Diese Disziplin vereinfacht das Design.
3. Progressive Enhancement: Von der Basis aus nach oben aufzubauen macht den logischen Fluss des Codes besser lesbar.
4. Weniger Konflikte: Das Schichten mit min-width reduziert sich überlagernde und einander überschreibende Regeln.

In der Praxis bedeutet das: Die Regeln ganz oben in Ihrer Stildatei gelten für das Smartphone. Anschließend fügen Sie mit einem Block wie @media (min-width: 600px) Anpassungen für mittelgroße Bildschirme hinzu und wechseln dann mit einer höheren Schwelle zum Desktop-Layout. Jede Schicht baut auf der vorherigen auf, statt sie zu überschreiben.

Der Unterschied zwischen min-width und max-width

Es ist wichtig, die beiden Richtungen nicht zu verwechseln. min-width bedeutet "diese Breite und größer" und ist in einem Mobile-First-Aufbau Ihr Hauptwerkzeug. max-width hingegen bedeutet "diese Breite und kleiner" und wird in einem Desktop-First-Aufbau verwendet. Beide im selben Projekt zu mischen, kann zu widersprüchlichen und schwer vorhersehbaren Regeln führen. Sich für eine Strategie zu entscheiden und ihr treu zu bleiben, ist der gesündeste Weg; für die meisten modernen Projekte ist diese Strategie min-width-basiert.

Inhaltsorientierte Festlegung von Breakpoints

Die solideste Responsive-Breakpoint-Strategie entsteht nicht aus numerischen Annahmen, sondern aus Beobachtung. Verkleinern und vergrößern Sie das Browserfenster langsam; achten Sie darauf, ab welchem Punkt Ihr Design unangenehm zu wirken beginnt. Genau dort sollten Sie einen Breakpoint setzen. Diese Methode wird oft als "Content-Breakpoint" bezeichnet.

Stellen Sie sich während dieses Prozesses folgende Fragen:

• Ist die Textzeile zu lang geworden? Für eine ideale Lesbarkeit werden etwa 50 bis 75 Zeichen pro Zeile empfohlen. Liegt die Zeile weit über diesem Bereich, kann es nötig sein, den Inhalt in eine schmalere Spalte zu zwingen oder eine weitere Spalte hinzuzufügen.
• Ist ein Element so eingequetscht, dass es unlesbar oder nicht anklickbar geworden ist? Dann ist es Zeit, das Layout zu ändern.
• Haben die Abstände ihr Gleichgewicht verloren? Wenn sich der Inhalt auf sehr breiten Bildschirmen zu stark ausdehnt, können Sie über eine Obergrenze (maximale Breite) nachdenken.

Das Schönste am inhaltsorientierten Ansatz ist, dass jedes Design seine eigenen natürlichen Bruchpunkte hat. Die Breakpoints einer dichten Kartengalerie müssen nicht dieselben sein wie die einer schlichten Blogartikel-Seite. Deshalb liefert es weitaus bessere Ergebnisse, projektspezifische, inhaltsbezogene Schwellen festzulegen, als eine Liste zu kopieren und einzufügen.

Komponentenbasiert denken

Statt für die gesamte Seite ein einziges Breakpoint-Set festzulegen, wird es zunehmend gängige Praxis, jede Komponente für sich zu betrachten. Der Bruchbedarf eines Navigationsmenüs ist unabhängig von dem einer Preistabelle. Die von modernem CSS gebotenen Container Queries führen diese Idee einen Schritt weiter: Eine Komponente kann sich nun an der Breite des Containers ausrichten, in dem sie sich befindet, und nicht an der Gesamtbreite des Bildschirms. Das ist ein äußerst mächtiges Werkzeug für wiederverwendbare Komponenten und reduziert an vielen Stellen den Bedarf an klassischen Media Queries.

Verbreitete Breakpoint-Bereiche und ihr Vergleich

Auch wenn wir den inhaltsorientierten Ansatz verfolgen, brauchen wir einen Ausgangspunkt. Die folgende Tabelle fasst die gängig verwendeten Kategorien von Bildschirmgrößen zusammen und welchen Geräteklassen sie entsprechen. Betrachten Sie diese Werte nicht als starre Regeln, sondern als Referenzrahmen, in den Sie Ihre Beobachtungen einordnen.

Kategorie	Ungefährer Breitenbereich	Typische Geräte	Layout-Ansatz
Klein (mobil)	0 - 599 px	Smartphones	Eine Spalte, vertikaler Stapel
Mittel (Tablet/Hochformat)	600 - 899 px	Kleine Tablets, große Smartphones im Querformat	Beginn von zwei Spalten
Breit (Tablet/Notebook)	900 - 1199 px	Tablets im Querformat, kleine Notebooks	Mehrspaltig, Seitenmenü
Sehr breit (Desktop)	1200 - 1535 px	Desktop, Standardmonitor	Vollbreites Layout
Riesig (großer Bildschirm)	1536 px und mehr	Große/ultrabreite Monitore	Obergrenze für den Inhalt

Der entscheidende Punkt bei der Nutzung dieser Tabelle ist folgender: Kopieren Sie diese Zahlen nicht und versuchen Sie nicht, Ihr Design daran anzupassen. Finden Sie stattdessen die natürlichen Bruchpunkte Ihres Designs und ordnen Sie sie dem nächstgelegenen sinnvollen Bereich zu. Die Tabelle gibt Ihnen eine Landkarte; aber die Route zeichnet Ihr Inhalt.

Wie viele Breakpoints sind genug?

Eine häufig gestellte Frage lautet: "Wie viele Breakpoints sollte es geben?" Es gibt keine eindeutige Zahl, aber ein allgemeines Prinzip: so viele wie nötig, so wenige wie möglich. Die meisten Projekte funktionieren mit drei bis fünf Breakpoints ganz hervorragend. Eine Stildatei mit Dutzenden von Breakpoints ist meist ein Zeichen dafür, dass für jedes Gerät ein eigener Flicken geschrieben wurde, statt inhaltsorientiert zu denken. Wenige, sinnvolle Breakpoints, die genau dort gesetzt werden, wo der Inhalt es wirklich verlangt, sind immer nachhaltiger.

Media Queries richtig schreiben

Eine Media Query definiert die Abschnitte von CSS, die unter bestimmten Bedingungen aktiviert werden. Die am häufigsten verwendete basiert auf der Breite, doch Media Queries können weit mehr. Sie können auch Zustände wie Ausrichtung (orientation), Auflösung, die Bewegungsvorlieben der Nutzer und sogar die Präferenz für ein Farbschema abfragen.

Eine grundlegende, breitenbasierte Media Query folgt im Mobile-First-Aufbau dieser Logik: Zuerst kommen die Basisstile, die für alle Geräte gelten, dann werden zusätzliche Stile angewendet, sobald der Bildschirm eine bestimmte Schwelle überschreitet. Modernes CSS bietet auch eine Range-Syntax (range syntax); so können Sie Bedingungen wie "zwischen diesem und jenem Wert" lesbarer schreiben. Diese Neuerung ist deutlich verständlicher als die alten, komplizierten Ausdrücke.

Neben der Breite sind einige Media-Features, die Sie berücksichtigen sollten, folgende:

• prefers-reduced-motion: Ermöglicht es Ihnen, Animationen für Nutzer zu reduzieren, die durch Bewegungen gestört werden oder bewegungsempfindlich sind. Das ist im Hinblick auf Barrierefreiheit wichtig.
• prefers-color-scheme: Passt die Stile an die Vorliebe der Nutzer für ein helles oder dunkles Thema an.
• orientation: Fragt ab, ob das Gerät im Hoch- oder Querformat gehalten wird; das ist besonders bei Tablets nützlich.
• hover und pointer: Ermöglicht es Ihnen zu erkennen, ob das Gerät auf einem präzisen Zeiger wie einer Maus oder auf Berührung basiert. Das ist wertvoll, um Touch-Ziele richtig zu dimensionieren.

Einheitenwahl: px, em und rem

Mit welcher Einheit Sie Breakpoint-Werte schreiben, ist ebenfalls eine Strategieentscheidung. Pixel (px) ist die gängigste und intuitivste. Breakpoints, die jedoch in em geschrieben sind, skalieren mit, wenn Nutzer die Schriftgröße ihres Browsers vergrößern; das kann im Hinblick auf Barrierefreiheit ein Vorteil sein. Im Sinne der Konsistenz ist es am besten, innerhalb eines Projekts einen einzigen Einheitenansatz zu wählen und daran festzuhalten. Viele Teams bevorzugen em oder rem für Breakpoints, um ein Verhalten zu erhalten, das mit der Textskalierung im Einklang steht.

Den Breakpoint-Bedarf mit modernem CSS verringern

Die vielleicht erlösendste Botschaft dieses Artikels lautet: Dank moderner CSS-Funktionen brauchen Sie nicht mehr so viele Breakpoints wie früher. Flexbox und insbesondere CSS Grid ermöglichen es Ihnen, flexible und fließende Layouts aufzubauen. Diese Layouts können sich von selbst anpassen, ohne dass feste Breakpoints nötig sind.

Mit den Auto-Placement-Funktionen von Grid können Sie zum Beispiel eine Galerie erstellen, die die Anzahl der Karten automatisch an die Bildschirmbreite anpasst. Sie definieren eine bestimmte Mindestbreite und der Browser entscheidet selbst, wie viele Karten in den verfügbaren Platz passen. Bei diesem Ansatz erhalten Sie ein Layout, das vom Smartphone bis zum Desktop reibungslos funktioniert, ohne eine einzige Media Query zu schreiben.

Weitere moderne Werkzeuge, die fließendes Design stärken, sind:

• Die Funktionen clamp(), min(), max(): Legen die Unter- und Obergrenze eines Wertes fest und sorgen für ein fließendes Verhalten dazwischen. So können Sie etwa die Schriftgröße innerhalb bestimmter Grenzen kontinuierlich an die Bildschirmbreite anpassen und "fluide Typografie" erzielen. Das beseitigt die Notwendigkeit, für die Größe von Überschriften einzelne Breakpoints zu schreiben.
• Container Queries: Sorgen dafür, dass eine Komponente auf die Größe des Containers reagiert, in dem sie sich befindet, und nicht auf die des Bildschirms. Dadurch sieht dieselbe Komponente in verschiedenen Bereichen der Seite bei unterschiedlichen Breiten korrekt aus.
• Viewport-Einheiten (vw, vh, dvh): Verleihen ein fließendes Verhalten, indem sie Größen direkt an einen Prozentsatz der Bildschirmgröße binden. Neue Einheiten wie dvh bewältigen Probleme wie das Verschieben der Adressleiste, besonders in mobilen Browsern, besser.

Fluides und adaptives Design

Hier ist es nützlich, zwei Philosophien zu unterscheiden. "Adaptives" Design verwendet stufenweise Layouts, die sich an bestimmten Breakpoints abrupt ändern. "Fluides" Design hingegen passt sich mit Prozentangaben und flexiblen Einheiten kontinuierlich und nahtlos an. Die solideste moderne Strategie ist eine ausgewogene Mischung aus beiden: Sie sorgen für die grundlegende Fluidität mit clamp(), Grid und flexiblen Einheiten und setzen nur an den wenigen kritischen Punkten Breakpoints ein, an denen das Layout wirklich umstrukturiert werden muss. So kommen Sie sowohl mit wenigen Breakpoints aus als auch mit einem Ergebnis, das bei jeder Zwischenbreite gut aussieht.

Ihre Breakpoint-Strategie testen

So gut eine Strategie auch sein mag, sie gilt erst dann als abgeschlossen, wenn sie auf echten Geräten und unter realen Bedingungen getestet wurde. Die Geräte-Simulation in den Entwicklerwerkzeugen des Browsers ist ein schneller Einstieg, spiegelt aber echte Touch-Interaktionen, die Performance und die tatsächliche Pixeldichte nicht vollständig wider.

Sie können Ihren Testprozess mit folgenden Schritten stärken:

1. Test des stufenlosen Verkleinerns: Verkleinern Sie das Browserfenster langsam von der breitesten bis zur schmalsten Form. Stellen Sie sicher, dass das Layout bei keiner Breite bricht, der Text nicht überläuft und keine horizontale Scrollleiste auftaucht. Die "Zwischen"-Breiten zwischen den Breakpoints sind die am häufigsten vernachlässigten und am meisten Probleme verursachenden Bereiche.
2. Test auf echten Geräten: Öffnen Sie die Seite auf den Smartphones und Tablets unterschiedlicher Größe, die Sie zur Hand haben. Bestätigen Sie, dass sich die Touch-Ziele bequem mit dem Finger auswählen lassen.
3. Ausrichtungswechsel: Drehen Sie das Gerät vom Hoch- ins Querformat und beobachten Sie, wie das Layout reagiert.
4. Schriftvergrößerung: Prüfen Sie, ob das Layout noch nutzbar bleibt, wenn Sie die Schriftgröße im Browser erhöhen. Das ist im Hinblick auf Barrierefreiheit ein kritischer Test.
5. Simulation einer langsamen Verbindung: Drosseln Sie die Netzwerkgeschwindigkeit mit den Entwicklerwerkzeugen und sehen Sie, wie die Seite bei einer langsamen Verbindung lädt.

Statt diese Tests einmal durchzuführen und dann liegen zu lassen, ist es am besten, sie bei jeder wesentlichen Designänderung zu wiederholen. Schon eine kleine Anpassung kann bei einer anderen Breite zu einem unerwarteten Bruch führen.

Die häufigsten Fehler

Es gibt einige Fehler, die bei der Breakpoint-Strategie immer wieder auftreten. Sie zu kennen, bewahrt Sie davor, in die Fallen zu tappen:

• Nur einige wenige populäre Geräte ins Visier zu nehmen und die Breiten dazwischen zu vernachlässigen.
• Breakpoints nicht am Inhalt, sondern an zufälligen "schönen" Zahlen festzumachen.
• Statt Mobile-First mit Desktop-First zu beginnen und dann zu versuchen, alles zu verkleinern.
• Touch-Ziele mit dem Mauszeiger zu testen und die Fingergröße zu vergessen.
• Bildern keine anpassungsfähige Dimensionierung zu geben und jedem Gerät dieselbe große Datei zu schicken.
• Zu viele Breakpoints hinzuzufügen und so eine unwartbare Stildatei zu erzeugen.

Häufig gestellte Fragen

Gibt es eine ideale Zahl für die Anzahl der Breakpoints?

Es gibt keine feste ideale Zahl; die Grundregel ist, mehr als nötig zu vermeiden. Die meisten Projekte arbeiten bequem mit drei bis fünf Breakpoints. Worauf es ankommt, ist nicht die Zahl, sondern dass die Breakpoints genau an den Punkten liegen, an denen der Inhalt tatsächlich bricht. Wenn Sie sich dabei ertappen, sehr viele Breakpoints zu schreiben, nutzen Sie vermutlich die Techniken des fluiden Designs nicht ausreichend.

Sollte ich mit Mobile-First oder Desktop-First beginnen?

Im modernen Webdesign liefert der Mobile-First-Ansatz in nahezu jedem Fall solidere Ergebnisse. Die Basisstile für den kleinsten Bildschirm zu schreiben und mit zunehmender Bildschirmgröße mit min-width Schichten hinzuzufügen, bietet sowohl Performance als auch Wartungsfreundlichkeit. Dieser Ansatz vereinfacht das Design zudem ganz natürlich, weil er Sie zwingt, die wichtigsten Inhalte zu priorisieren.

Mit welcher Einheit sollte ich Breakpoint-Werte schreiben?

Pixel ist die gängigste und intuitivste Wahl, aber die Einheiten em oder rem ermöglichen es, dass sich die Breakpoints mit anpassen, wenn Nutzer die Browser-Schriftgröße ändern. Das ist im Hinblick auf Barrierefreiheit ein Vorteil. Welche Sie auch wählen, das Wichtigste ist, über ein Projekt hinweg konsistent zu bleiben; das Mischen von Einheiten kann zu unvorhersehbarem Verhalten führen.

Werden Container Queries die Media Queries ersetzen?

Nicht vollständig, aber beide ergänzen sich auf starke Weise. Container Queries sind bei wiederverwendbaren Komponenten äußerst wertvoll, weil sie es einer Komponente ermöglichen, sich an den Bereich anzupassen, in dem sie sich befindet. Für das allgemeine Seitenlayout und große strukturelle Änderungen sind Media Queries jedoch nach wie vor unverzichtbar. In einer modernen Strategie verwenden Sie beide gemeinsam, jede dort, wo sie ihre Stärken hat.

Welche Bildschirmgrößen sollte ich testen?

Statt sich an bestimmten Gerätelisten festzubeißen, ist es am sinnvollsten, ein breites Spektrum an Breiten stufenlos zu durchlaufen. Verändern Sie das Browserfenster langsam von der schmalsten bis zur breitesten Form und bestätigen Sie, dass das Layout bei keiner Zwischenbreite bricht. Zusätzlich sollten Sie auf den echten Geräten, die Sie zur Hand haben, das Touch-Erlebnis, den Ausrichtungswechsel und die Schriftvergrößerung ausprobieren.

Braucht man Breakpoints für sehr große Monitore?

Meistens ja, aber nicht, um das Layout noch weiter auszudehnen, sondern im Gegenteil, um es zu begrenzen. Auf sehr breiten Bildschirmen beeinträchtigt eine endlose Ausdehnung des Inhalts die Lesbarkeit, weil die Textzeilen übermäßig lang werden. Deshalb ist es auf großen Bildschirmen meist eine gute Praxis, dem Inhalt eine maximale Breite zu geben und ihn auf dem Bildschirm zu zentrieren. So bleibt das Leseerlebnis bei jeder Bildschirmgröße komfortabel.

Fazit

Die Breakpoint-Strategie ist das unsichtbare, aber entscheidende Rückgrat des responsiven Webdesigns. Richtig aufgebaut, bemerkt sie niemand; denn auf jedem Gerät sieht alles so aus, wie es sein soll. Falsch aufgebaut, macht sie sich auf jedem Bildschirm bemerkbar. Das wichtigste Prinzip, das wir in diesem Artikel gesehen haben, lautet: Legen Sie Breakpoints nicht an Geräten, sondern am Inhalt fest. Statt zu versuchen vorherzusagen, welches Smartphone oder Tablet als Nächstes erscheint, beobachten Sie die natürlichen Bruchpunkte Ihres Designs und treffen Sie die Entscheidung danach.

Beginnen Sie, indem Sie Mobile-First denken, verwenden Sie eine geringe, aber sinnvolle Anzahl an Breakpoints, schreiben Sie Media Queries bewusst und maximieren Sie die Fluidität mit den Werkzeugen, die modernes CSS bietet, wie Grid, clamp() und Container Queries. Dadurch reduzieren Sie sowohl die Anzahl Ihrer Breakpoints als auch erhalten Sie ein wartungsfreundliches Design, das bei jeder Zwischengröße gut aussieht. Denken Sie daran: Jede Media Query bringt eine Wartungslast mit sich; der beste Breakpoint ist der, den Sie gar nicht erst schreiben müssen.

Schließlich ist keine Strategie ohne echte Tests vollständig. Probieren Sie Ihr Design über ein stufenloses Spektrum an Breiten, auf echten Geräten und unter verschiedenen Bedingungen der Barrierefreiheit aus. Wenn Sie diese Disziplin zur Gewohnheit machen, sind Sie für jede Bildschirmgröße, die Ihnen begegnet, sicher gewappnet. Eine solide Breakpoint-Strategie ist eine Investition, die Ihnen, einmal aufgebaut, über viele Jahre hinweg dient.