Media Query Generator
Bau dir per Klick die passende CSS Media Query für responsives Webdesign. Du siehst sofort, ob sie auf dein aktuelles Fenster zutrifft, und kopierst sie mit einem Klick.
Alles läuft lokal in deinem Browser. Es wird nichts gespeichert oder übertragen.
Was Media Queries machen
Eine Media Query ist der CSS-Baustein für responsives Design. Sie schaltet Styles je nach Bedingung, meist nach der Breite des Browserfensters. So bekommt das Smartphone ein einspaltiges Layout und der Desktop ein mehrspaltiges, ganz ohne separate Seiten.
Sinnvoll ist der Mobile-First-Ansatz: Du gestaltest zuerst
die kleine Ansicht und erweiterst dann mit min-width nach oben. Das hält das CSS
schlank. Die genauen Breakpoints richten sich nicht nach konkreten Geräten, sondern danach, wo
dein Layout anfängt zu bröckeln. Gängige Werte sind 640, 768, 1024 und 1280 Pixel.
Ein sauber gebautes responsives Layout ist Pflicht, nicht Kür: Der Großteil der Besucher kommt über das Handy, und Google bewertet die mobile Version zuerst. Wenn du eine Webseite willst, die auf jedem Gerät sitzt, findest du das bei mir unter modernes Webdesign.
Häufige Fragen zu Media Queries
Was ist eine Media Query?
Eine Media Query ist eine CSS-Regel, mit der Styles nur unter bestimmten Bedingungen greifen, zum Beispiel ab einer bestimmten Fensterbreite. So passt sich eine Webseite an Smartphone, Tablet und Desktop an. Das ist die Grundlage von responsivem Webdesign.
Was ist der Unterschied zwischen min-width und max-width?
min-width greift ab einer Breite aufwärts, max-width bis zu einer Breite. Beim modernen Mobile-First-Ansatz baust du zuerst die mobile Ansicht und erweiterst mit min-width nach oben. Das führt meist zu weniger und saubererem CSS als der umgekehrte Weg mit max-width.
Sollte ich px oder em für Breakpoints verwenden?
px ist am gebräuchlichsten und einfach zu verstehen. em (bzw. rem) hat einen Vorteil: Die Breakpoints skalieren mit, wenn Nutzer die Schriftgröße im Browser hochstellen. Für maximale Barrierefreiheit sind em-Breakpoints die etwas robustere Wahl. Der Generator kann beides.
Was ist die moderne Bereichsschreibweise?
Statt (min-width: 768px) kannst du seit einiger Zeit auch (width >= 768px) schreiben, und Bereiche als (768px <= width <= 1024px). Das ist kürzer und lesbarer. Alle aktuellen Browser verstehen das seit rund 2023. Für ältere Browser bleibst du besser bei der klassischen Schreibweise.
Wofür sind prefers-color-scheme und prefers-reduced-motion?
Damit reagierst du auf Einstellungen des Nutzers. prefers-color-scheme: dark greift, wenn das Gerät im Dunkelmodus ist, ideal für einen Dark Mode. prefers-reduced-motion: reduce greift, wenn jemand Animationen reduziert haben will, was für Barrierefreiheit wichtig ist. Beide kannst du unter „Erweiterte Optionen" zuschalten.
Kann ich den Generator kostenlos nutzen?
Ja, komplett kostenlos und ohne Anmeldung. Alles läuft lokal in deinem Browser, es wird nichts gespeichert oder übertragen.
Deine Webseite auf jedem Gerät scharf?
Ich baue Webseiten, die vom Smartphone bis zum großen Monitor sauber sitzen. Sauber programmiert, schnell und ohne Baukasten-Ballast.
Kontakt aufnehmen →
