CSS-Media-Queries-Generator (Breakpoints)
Wähle die Breakpoints und die zusätzlichen Abfragen. Ändere die Fenstergröße und sieh, welche Media Queries gerade gelten.
So geht’sDie Breakpoints deines CSS, fertig
Verfügbar auf: 
CSS-Media-Queries-Generator (Breakpoints): wofür es gut ist
Media Queries lassen das Layout je nach Bildschirm wechseln. Dieser Generator baut das CSS-Gerüst mit den Breakpoints von Bootstrap 5 (576, 768, 992, 1200 und 1400 px), von Tailwind (640, 768, 1024, 1280 und 1536 px), einem einfachen Satz oder deinen eigenen.
Wähle Mobile-first (min-width), Desktop-first (max-width, mit der Anpassung von 0,02 px, die Bootstrap nutzt) oder Bereiche, in px oder em, und füge Abfragen für Dunkelmodus, weniger Bewegung, Maus oder Touch, Ausrichtung, Druck und hohen Kontrast hinzu. Ändere die Fenstergröße, um zu sehen, welche Media Queries gelten.
So geht’s
- Wähle Breakpoints und Ansatz.
- Markiere die zusätzlichen Abfragen.
- Kopiere oder lade das CSS herunter.
Wann nutzen
- Das CSS einer neuen Website beginnen.
- Breakpoints im Team vereinheitlichen.
- Lernen, wie Media Queries funktionieren.
Häufige Fragen
Mobile-first oder Desktop-first?
Mobile-first wird heute am meisten genutzt: Das Basis-CSS ist das des Handys, und jedes min-width fügt Anpassungen für größere Bildschirme hinzu. So liest das Handy, das meist schwächere Verbindung und Prozessor hat, weniger Regeln. Desktop-first (max-width) macht das Gegenteil und ist nützlich, um alte Websites anzupassen.
Welche Breakpoints nutze ich?
Die von Bootstrap 5 sind 576, 768, 992, 1200 und 1400 px; die von Tailwind sind 640, 768, 1024, 1280 und 1536 px. Besser als ein Framework zu kopieren ist es, den Breakpoint dorthin zu setzen, wo dein Layout bricht, aber beide Sätze sind gute Ausgangspunkte.
Warum em in den Media Queries nutzen?
In Media Queries entspricht 1em der Standardschriftgröße des Browsers (normalerweise 16 px). Wenn die Person die Standardschrift vergrößert hat, folgen die Breakpoints in em, und das Layout wechselt am richtigen Punkt, was mit px nicht passiert.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.