Was ist ein Breakpoint?
Ein Breakpoint ist der Punkt, an dem eine Media Query greift und sich das Layout ändert. MDN und web.dev definieren ihn genau so. In der Praxis ist das fast immer eine Breite: „Ab 768 Pixel stehen die Karten nebeneinander.“
Die Media Query ist die Regel im CSS, der Breakpoint die Zahl darin. Dazu braucht deine Seite den Viewport-Tag mit width=device-width, sonst rendern Handys mit Desktop-Breite und deine Breakpoints greifen nicht.
Welche Werte die gängigen Systeme nutzen
Feste Standards gibt es nicht. Jedes System bringt eigene Vorgaben mit:
System
Standard-Breakpoints
Elementor
Mobil bis 767 px, Tablet bis 1024 px
Bootstrap 5.3
576 · 768 · 992 · 1200 · 1400 px
Tailwind CSS
640 · 768 · 1024 · 1280 · 1536 px
Elementor kennt zusätzlich Mobil Extra (880 px), Tablet Extra (1200 px), Laptop (1366 px) und Widescreen (ab 2400 px), die du unter Website-Einstellungen → Layout → Breakpoints einschaltest. Tailwind definiert seine Werte in rem, 48rem entsprechen bei Standardschrift 768 px.
Welche Bildschirme deine Besucher haben
In Deutschland kamen im Oktober 2026 laut StatCounter 60,21 % der Seitenaufrufe vom Handy, 38,13 % vom Desktop und 1,66 % vom Tablet. Die Auflösungen streuen breit:
Case A · Handy
Häufigste Handy-Auflösungen, Deutschland, Oktober 2026
14,13 %
414 × 896
11,84 %
384 × 832
Alle häufigen Handys liegen zwischen 360 und 414 px
Beide bekommen bei Elementor die Mobil-Ansicht und bei Bootstrap das Basis-Layout ohne Breakpoint.
Case B · Desktop
Häufigste Desktop-Auflösungen, Deutschland, Oktober 2026
34,96 %
1920 × 1080
7,47 %
1536 × 864
Desktop ist nicht gleich 1920
Fast jeder dreizehnte Desktop-Aufruf kommt mit 1536 px Breite. Prüf dein Layout also auch dort.
StatCounter misst die Bildschirmauflösung, nicht den sichtbaren Bereich im Browser. Nimm die Werte als Orientierung, nicht als Vorgabe für Breakpoints.
Häufige Fehler
Fehler 1 · Breakpoints nach Geräten wählen
Web.dev rät ausdrücklich davon ab, Breakpoints an Geräteklassen, Marken oder Betriebssystemen auszurichten. Neue Geräte kommen jedes Jahr. Dein Inhalt bleibt.
Fehler 2 · Zu viele Breakpoints einschalten
Jeder zusätzliche Breakpoint in Elementor ist eine Ansicht, die du pflegen musst, und er erzeugt mehr CSS. Schalte nur ein, was dein Layout wirklich braucht.
Fehler 3 · Inhalte auf dem Handy ausblenden
Was nicht passt, verstecken? Web.dev rät davon ab. Der Handy-Besucher will dieselbe Information, nur anders angeordnet.
Fehler 4 · Nur an zwei Breiten testen
Wer nur 390 und 1920 px ansieht, verpasst die Lücken dazwischen. Gerade zwischen 768 und 1024 px brechen Layouts gern.
So findest du gute Breakpoints
- Klein anfangen: Bau zuerst die schmale Ansicht.
- Fenster aufziehen: In den Entwicklertools des Browsers langsam breiter ziehen. Wo es unschön wird, kommt ein Breakpoint.
- Zeilen messen: Web.dev nennt rund zehn Wörter je Zeile als Signal, dass Text eine zweite Spalte vertragen kann.
- Eigene Daten ansehen: GA4 zeigt dir unter Technik die Bildschirmauflösungen deiner Besucher.
Häufige Fragen
Welche Breakpoints sollte ich verwenden?
Es gibt keine offiziellen Standardwerte. Starte mit den Vorgaben deines Systems, bei Elementor 767 und 1024 px, und ergänze dort, wo dein Inhalt umbricht.
Welche Breakpoints nutzt Elementor standardmäßig?
Mobil bis 767 px, Tablet bis 1024 px, darüber Desktop. Vier weitere Breakpoints lassen sich zuschalten: Mobil Extra, Tablet Extra, Laptop und Widescreen.
Breakpoints in px oder em?
Für textlastige Layouts empfiehlt web.dev relative Einheiten wie em, bei bildlastigen Layouts sind Pixel in Ordnung. Tailwind nutzt rem, Bootstrap und Elementor Pixel.
Was ist der Unterschied zwischen Breakpoint und Media Query?
Die Media Query ist die Regel im CSS, der Breakpoint der Schwellenwert darin. Ohne Media Query kein Breakpoint, aber eine Media Query kann auch anderes abfragen, etwa den Dark Mode.
Quellen
- MDN: Responsive Design
- web.dev: Media queries
- web.dev: Responsive web design basics
- Elementor-Hilfe: Mobile Editing
- Bootstrap-Doku: Breakpoints
- Tailwind-Doku: Responsive design
- StatCounter: Mobil, Desktop, Tablet in Deutschland
- StatCounter: Handy-Auflösungen in Deutschland
- StatCounter: Desktop-Auflösungen in Deutschland
