Ein Breakpoint ist die Viewport-Breite, an der eine Media Query greift und das Layout auf eine andere Anordnung umschaltet. Unterhalb des Werts gilt die eine Regel, oberhalb die andere. Der Breakpoint steht als Zahl im Stylesheet und beschreibt damit eine Eigenschaft des Layouts. Wie viele solcher Werte eine Website bekommt und woher sie stammen, behandelt die Breakpoint-Strategie.
- Breakpoint
Die Viewport-Breite, an der eine Media Query greift und das Layout auf eine andere Anordnung umschaltet.
Beispiel: „Unter dem Breakpoint bei 768 Pixeln klappt die Navigation zum Burger-Menü zusammen.“Auch: Umbruchpunkt oder Haltepunkt. In der Softwareentwicklung bezeichnet Breakpoint etwas ganz anderes, nämlich die Stelle, an der ein Debugger ein Programm anhält.
Abgrenzung: Der Breakpoint ist der einzelne Wert. Das Verfahren dahinter, also wie viele Umschaltpunkte eine Website bekommt und woran sie festgemacht werden, heißt Breakpoint-Strategie.
Der Breakpoint lebt im Stylesheet
Der Browser vergleicht bei jeder Größenänderung die aktuelle Viewport-Breite mit den Werten aus den Media Queries und aktiviert die passenden Regeln. Ein iPad taucht in diesem Vorgang nirgends auf. Dieselbe Seite schaltet auch am Desktop in das Telefon-Layout, sobald du das Fenster schmal genug ziehst. Genau daran lässt sich ein Breakpoint am schnellsten prüfen.
Übliche Werte stammen meist aus dem Framework
Die wiederkehrenden Zahlen im Web kommen aus den CSS-Frameworks. Tailwind CSS liefert ab Werk fünf Stufen bei 640, 768, 1024, 1280 und 1536 Pixeln, Bootstrap arbeitet mit einer ähnlichen Reihe. Für schlichte Layouts trägt dieser Satz ohne Anpassung. Sobald ein Element eigene Ansprüche hat, etwa eine Preistabelle mit vier Spalten oder eine Navigation mit langen Menüpunkten, liegt der passende Umschaltpunkt selten genau auf einer dieser Stufen.
Woran du erkennst, dass ein Breakpoint fehlt
Der Test besteht darin, das Browserfenster langsam von schmal nach breit zu ziehen und auf Stellen zu achten, an denen die Darstellung kippt. Eine Überschrift zerfällt in Einzelwörter, eine Tabelle schiebt die Seite seitwärts, ein Bild wächst über seinen Textblock hinaus, zwei Buttons kleben aneinander. Dort fehlt eine Regel. Aus unseren Relaunch-Projekten wissen wir, dass diese Stellen selten mit den Framework-Stufen zusammenfallen, weil jedes Layout seine eigenen engen Stellen mitbringt.