Medienabfrage-Generator Erstellen Sie CSS-Medienabfragen mit Funktionsbedingungen und vorgegebenen Breakpoints.

🎨

Medienabfrage-Generator

Erstellen Sie CSS-Medienabfragen mit Funktionsbedingungen und vorgegebenen Breakpoints.

Vordefinierte Einstellungen verwenden oder benutzerdefiniert anpassen

Wählen Sie eine gängige Vordefinierung oder fügen Sie benutzerdefinierte Bedingungen mit Medienfunktionen hinzu.

Bedingungen konfigurieren

Legen Sie den Medientyp, die Funktionsbedingungen und kombinieren Sie diese mit AND- oder OR-Operatoren fest.

Abfrage kopieren

Kopieren Sie die generierte Medienabfrage, um sie in Ihrem Stylesheet zu verwenden.

Loading tool...

What Is Medienabfrage-Generator?

Der Media-Query-Generator hilft Ihnen dabei, CSS-Media-Abfragen für responsives Design und Funktionsdetektion zu erstellen. Media-Abfragen wenden CSS-Regeln bedingt auf Basis von Gerätecharakteristika wie Viewport-Breite, -Höhe, Ausrichtung, Farbschemavorliebe und vielem mehr an. Dieses Tool bietet vorgefertigte Abfragen für häufige Anwendungsfälle (Mobilgerät, Tablet, Desktop, Dunkelmodus, Druck, reduzierte Bewegung) und einen benutzerdefinierten Builder zum Erstellen komplexer Bedingungen. Sie können den Medientyp (Bildschirm, Druck, alle) festlegen, mehrere Funktionsbedingungen hinzufügen und wählen, wie diese kombiniert werden sollen (UND oder ODER). Die generierte Abfrage enthält die richtige Syntax mit der @media-Regel und Klammern, bereit zum Einsetzen in Ihren CSS-Code.

Why Use Medienabfrage-Generator?

Gängige Vordefinierungen für mobile Geräte, Tabletts, Desktops, Dark Mode und mehr
Unterstützung aller CSS-Medienfunktionen, einschließlich moderner Funktionen
AND-/OR-Operatoren zum Kombinieren mehrerer Bedingungen
Referenztable für gängige Breakpoints zur schnellen Nachschlage

Common Use Cases

Responsives Layout

Erstellen Sie breakpoint-basierte Styles für verschiedene Bildschirmgrößen.

Dark-Mode-Unterstützung

Generieren Sie prefers-color-scheme-Abfragen für Dark-Mode-Styles.

Druckstylesheets

Erstellen Sie @media print-Abfragen für druckoptimierte Styles.

Zugänglichkeitsfunktionen

Richten Sie reduzierte Bewegung und Kontrastpräferenzen für zugängliche Designs ein.

Technical Guide

CSS-Media-Abfragen verwenden die @media-Regel, um Styles bedingt anzuwenden. Die Syntax lautet @media [Typ] und (Bedingung) { Regeln }. Medientypen umfassen Bildschirm, Druck und alle. Media-Funktionen testen Gerätefähigkeiten: min-Breite/max-Breite für responsive Breakpoints, Ausrichtung für Hochformat/Querformat, prefers-color-scheme für Dunkelmodus/Hellmodus, prefers-reduced-motion für Animationsempfindlichkeit, hover für Hover-Funktion und pointer für Eingabegenauigkeit. Mehrere Bedingungen werden mit dem and-Schlüsselwort für alle Bedingungen oder durch Komma getrennt für jede Bedingung kombiniert. Das not-Schlüsselwort negiert eine Abfrage. Moderne Funktionen wie prefers-color-scheme und prefers-reduced-motion ermöglichen progressive Verbesserungen für Benutzervorlieben. Für den mobile-first-Ansatz werden min-Breite-Abfragen verwendet. Für den desktop-first-Ansatz werden max-Breite-Abfragen verwendet. Die Kombination beider erstellt Bereichsabfragen wie @media (min-Breite: 768px) und (max-Breite: 1023px).

Tips & Best Practices

1
Verwenden Sie den mobile-first-Ansatz mit min-width-Abfragen für bessere Leistung
2
Fügen Sie immer prefers-reduced-motion für Zugänglichkeit hinzu
3
Testen Sie prefers-color-scheme für automatische Dark-Mode-Unterstützung
4
Verwenden Sie Bereichsabfragen (min und max) zum Zielsetzen spezifischer Gerätekategorien

Related Tools

CSS-Flexbox-Spielplatz

Visueller CSS-Flexbox-Explorer mit interaktiven Steuerungselementen für alle Eigenschaften von Flex-Containern.

🎨 CSS & Design

CSS-Grid-Spielplatz

Visueller CSS-Grid-Builder mit interaktiven Steuerungen für Template-Spalten, -zeilen und Lücken.

🎨 CSS & Design

Responsiver Design-Tester

Vorschau von Websites bei gängigen Geräte-Breakpoints mit einem integrierten iframe-Viewer.

🎨 CSS & Design

Druck-Stylesheet-Generator

Erstellen Sie @media Druck-Stylesheets mit Optionen, um Elemente zu verstecken, Text zu stylen und Seitenumbrüche zu kontrollieren.

🎨 CSS & Design

Frequently Asked Questions

Q Sollte ich min-width oder max-width verwenden?

min-width folgt dem mobile-first-Ansatz (empfohlen). max-width folgt dem desktop-first-Ansatz. Wählen Sie basierend auf Ihrem Designansatz.

Q Welche Breakpoints sollte ich verwenden?

Gängige Breakpoints: 640px (mobile), 768px (Tablett), 1024px (Laptop), 1280px (Desktop), 1536px (großer Desktop).

Q Kann ich mehrere Bedingungen kombinieren?

Ja, verwenden Sie and, um alle Bedingungen zu erfordern, oder Komma, um jede Bedingung zu treffen.

Q Was ist prefers-color-scheme?

Es erkennt, ob der Benutzer sein Betriebssystem auf Dark- oder Light-Mode eingestellt hat und ermöglicht so das automatische Umschalten des Designs.

Q Wie unterstütze ich reduzierte Bewegung?

Verwenden Sie @media (prefers-reduced-motion: reduce), um Animationen für sensible Benutzer zu deaktivieren oder zu reduzieren.

About This Tool

Medienabfrage-Generator is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.