UTILS.
Privat von Anfang an
@

CSS Media Query Builder

Erstelle eine responsive @media-Query mit Voreinstellungen und kopiere sie.

Deine Dateien bleiben auf diesem Gerät

Dateien werden im Browser verarbeitet, nie hochgeladen. Die Website lädt den benötigten Code und die Ressourcen herunter. Ohne Konto und Tracker.

Speichere dieses Tool über Herunterladen als einzelne HTML-Datei zur Offline-Nutzung.

Datenschutz →

Über dieses Tool

Stelle eine responsive @media-Query zusammen, indem du min-width, max-width oder einen Bereich plus Ausrichtung wählst, mit Geräte-Voreinstellungen per Klick, dann kopiere den Wrapper. Alles läuft in deinem Browser.

Häufig gestellte Fragen

Was ist der Unterschied zwischen min-width und max-width?
min-width wendet Stile ab dieser Breite und darüber an (Mobile-First), während max-width sie bei dieser Breite und darunter anwendet.
Wie funktionieren die Geräte-Voreinstellungen?
Jede Voreinstellung füllt typische Breakpoints aus — Mobil bis 767px, Tablet 768–1023px und Desktop ab 1024px — die du anschließend feinabstimmen kannst.

Weitere Tools