Web / CSS

Media-Query-Generator

Erstelle Breakpoints und responsive CSS-Strukturen für Webseiten. Das Tool erzeugt Media Queries, Container-Regeln, Grid-Layouts und kurze Dokumentation für mobile-first oder desktop-first Arbeitsweisen.

Generator

Responsive CSS-Regeln konfigurieren

Alle Eingaben werden lokal im Browser verarbeitet.

Grunddaten

Basis-Selektor Container-Selektor Strategie Ausgabe Einheit Basis-Schriftgröße

Breakpoints

Eine Zeile pro Breakpoint im Format Name;Breite. Beispiel: tablet;768.

Regeln

Start-Spalten Maximale Spalten Start-Gap Maximaler Gap Start-Container Maximale Breite

Optionen Kommentare ausgeben HTML-Beispiel ergänzen Regel für reduzierte Bewegung ergänzen Print-Regel ergänzen

Ausgabe

CSS-Code

Bereit.

Wofür ist das Tool gedacht?

Der Generator hilft beim schnellen Aufbau konsistenter Responsive-Regeln. Er eignet sich für Layout-Grundlagen, kleine Projekte, Dokumentation von Breakpoints und als Startpunkt für eigene CSS-Systeme.

Die Ausgabe ist bewusst übersichtlich gehalten und sollte nach dem Einfügen in ein Projekt an das vorhandene Designsystem angepasst werden.