Media Query Generator
Erzeuge CSS-Media-Queries für responsive Designs, per Preset oder manuell, und passe dein gesamtes Layout an jedes Display an. Lokal im Browser, DSGVO-konform.
Deine Eingaben werden in deinem Browser verarbeitet und nicht an unsere Server übertragen. Hinweis: Drittanbieter-Ressourcen (z. B. Werbung und Analyse von Google/Cloudflare) sowie ein freiwilliger PayPal-Spendenlink können beim Laden bzw. Anklicken Daten übertragen. Browser-Erweiterungen oder -Plugins können sichtbare Inhalte in den Eingabefeldern mitlesen.
Ergebnis erscheint hier …
Video: So nutzt du dieses Tool
Das Video wird von YouTube gehostet. Beim Abspielen können Daten an Google übertragen werden.
Media Query Generator
Der Media Query Generator erzeugt fertige CSS-Media-Queries für responsive Designs. Nutze ein Geräte-Preset für Smartphone, Tablet, Desktop und Großbildschirm oder gib Min- und Max-Breite selbst ein.
Was ist eine Media Query?
Eine Media Query ist ein CSS-Baustein, der Styles nur unter bestimmten Bedingungen anwendet, zum Beispiel ab einer bestimmten Bildschirmbreite. So passt sich deine Website flexibel an verschiedene Geräte an.
Presets für gängige Geräte
Die Presets folgen gängigen Breakpoints: Smartphone unter 576px, Tablet zwischen 576 und 992px, Desktop ab 992px und Großbildschirm ab 1200px. Du kannst jedes Preset anschließend mit eigenen Werten überschreiben.
Min- und Max-Breite kombinieren
Neben der reinen Min-Breite kannst du einen geschlossenen Bereich mit Min- und Max-Breite erzeugen. Zusätzlich lässt sich die Orientierung (Quer- oder Hochformat) in die Bedingung aufnehmen.
Häufige Fragen
Was ist eine Media Query?
Eine Media Query ist ein CSS-Baustein, der Styles nur unter bestimmten Bedingungen anwendet, zum Beispiel ab einer bestimmten Bildschirmbreite. So passt sich deine Website flexibel an verschiedene Geräte an.
Welche Geräte-Presets gibt es?
Das Tool bietet Presets für Smartphone, Tablet, Desktop und Großbildschirm. Die Werte folgen gängigen Breakpoints und lassen sich anschließend mit eigenen Zahlen überschreiben.
Kann ich Min- und Max-Breite kombinieren?
Ja. Neben einer reinen Min-Breite kannst du einen geschlossenen Bereich mit Min- und Max-Breite erzeugen. Das ist nützlich für Tablet-Bereiche zwischen zwei Breakpoints.
Was bewirkt die Orientierung?
Du kannst die Ausrichtung Quer- oder Hochformat in die Bedingung aufnehmen. So lassen sich Styles gezielt für Geräte im Hoch- oder Querformat setzen.
Für welche Frameworks eignet sich der Generator?
Der Generator liefert allgemeines CSS, das du direkt in eigene Stylesheets übernehmen kannst. Die Presets orientieren sich an gängigen Framework-Breakpoints, du kannst aber auch eigene Werte nutzen.
Werden meine Werte hochgeladen?
Nein. Die Erzeugung der Media Queries läuft vollständig in deinem Browser. Deine Werte werden nicht an unseren Server übertragen oder gespeichert.