UTILS.
100 % im Browser
@

CSS Media Query Builder

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

Ü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