Generator für responsive CSS-Media-Queries
Generieren Sie responsive CSS-Media-Queries (gängige Breakpoints) direkt im Browser.
Breakpoints aligned with Tailwind CSS. “min-width” = mobile-first approach (recommended).
🔒 100 % clientseitig — keine Daten gesendet
Generieren Sie mit wenigen Klicks responsive CSS-Media-Queries mit gängigen Breakpoints (Mobile, Tablet, Desktop). Kopieren Sie sofort nutzbaren Code für Ihre adaptiven Layouts. Alles läuft zu 100 % im Browser, ohne Installation und ohne Datenübertragung.
What is it for?
- ▸ Schnell Breakpoints für Mobile, Tablet und Desktop erstellen
- ▸ Typografie und Grids anhand der Bildschirmbreite anpassen
- ▸ Hoch- oder Querformat eines Geräts berücksichtigen
- ▸ Breakpoints in einem Teamprojekt standardisieren
FAQ
Was sind die gängigsten CSS-Breakpoints?
Klassische Werte sind 480px für Mobile, 768px für Tablet, 1024px für kleine Desktop-Bildschirme sowie 1280px und mehr für große Bildschirme. Diese Schwellenwerte sind Richtlinien, die Sie an Ihre Inhalte anpassen sollten.
Sollte man min-width oder max-width verwenden?
Bei einem Mobile-first-Ansatz ist min-width vorzuziehen, um Styles hinzuzufügen, wenn der Bildschirm größer wird. max-width passt zu einem Desktop-first-Ansatz. Der Generator bietet je nach Bedarf beides.
Wie zielt man in CSS auf Retina-Bildschirme ab?
Sie verwenden eine Media Query für die Pixeldichte, etwa min-resolution: 2dppx, um schärfere Bilder auszuliefern. Das ist nützlich für die hochauflösenden Bildschirme neuerer Smartphones und Laptops.