CSS-Medienabfrage-Generator
Führung
CSS-Medienabfrage-Generator
Konstruieren präzise CSS @media Regeln für jeden Breakpoint und jede Kombination von Funktionen ohne das Erinnern der Syntax. Wählen Sie ein Framework-Vorlage, wählen Sie die Abfrageart und schalten Sie die zusätzlichen Medienfunktionen ein, die Sie benötigen – das Tool verknüpft automatisch einen gültigen Block mit klassischer und moderner Bereichssyntax.
Nutzung
- Wählen Sie einen Framework-Vorlage — Bootstrap 5, Tailwind CSS, Material Design oder Custom — dann wählen Sie die Breite des Breakpoints.
- Wählen Sie Abfrageart: Minimale Breite (mobile-first), maximale Breite (desktop-first) oder ein Bereich zwischen zwei Breiten.
- Wählen Sie Syntaxstil: klassisch
min-width/max-widthoder das neue Media Queries Level 4 Bereichsformat (width >= ...). - Schalten Sie beliebige Zusätzliche Merkmale ein, die mit dem Breakpoint kombiniert werden: Orientierung, prefers-color-scheme, prefers-reduced-motion, Hover oder Pointer.
- Kopieren Sie das generierte
@mediaBlock aus dem Ausgabefenster und fügen Sie ihn in Ihre Stylesheet ein.
Funktionen
- Framework-Vorlagen – Einfacher Zugriff auf Breakpoints für Bootstrap 5, Tailwind CSS und Material Design, plus ein benutzerdefiniertes Modus für beliebige Pixelwerte.
- Drei Abfragearten – Erstellen Sie mobile-first
min-width, desktop-firstmax-widthoder eine präzise Bereichsabfrage, die eine einzelne Geräteklasse anspricht. - Klassische und moderne Syntax – Wechseln Sie zwischen traditionellen
min-width/max-widthRegeln und der saubereren Media Queries Level 4 Bereichssyntax (width >= X). - Kombinierte Medienfunktionen – Fügen Sie Orientierung, prefers-color-scheme, prefers-reduced-motion, Hover-Fähigkeit und Pointer-Accuracy auf jede Breitenabfrage hinzu.
- Live-Updates – Der Ausgang wird automatisch neu generiert, sobald Sie die Eingaben ändern, sodass Sie verschiedene Kombinationen sofort vorhersagen können.
- Kopieren & Herunterladen – Greifen Sie den CSS-Ausgang mit einem Klick ab oder speichern Sie ihn als
.cssDatei für Ihr Projekt.
Häufig gestellte Fragen
-
Was ist eine CSS-Medienabfrage?
Eine Medienabfrage ist ein CSS-Funktion, die Stile nur dann anwendet, wenn die Browserumgebung bestimmte Bedingungen erfüllt, wie z. B. die Breite des Viewports, die Geräteorientierung oder die Benutzerpräferenzen. Sie ist das zentrale Element hinter responsivem Design und ermöglicht es, eine einzige Stylesheet-Datei auf Smartphones, Tablets, Desktops und darüber hinaus anzupassen.
-
Welcher Unterschied besteht zwischen min-width und max-width?
min-width wird angewendet, wenn der Viewport mindestens diese Breite hat, was die Grundlage für mobile-first CSS darstellt – Sie beginnen mit kleinen Bildschirmstilen und fügen Regeln hinzu, wenn der Viewport wächst. max-width wird angewendet, wenn der Viewport höchstens diese Breite hat, was die desktop-first-Strategie darstellt, bei der die Stile schrittweise für kleinere Geräte abgeändert werden.
-
Was ist das neue Bereichsformat in Media Queries Level 4?
Media Queries Level 4 führt Vergleichsoperatoren wie (width >= 768px) und (400px <= width <= 1200px) als klarere Alternative zu Paaren aus min-width und max-width ein. Es verbessert die Lesbarkeit für Bereiche und wird in allen modernen Browsern unterstützt, obwohl ältere Browser weiterhin die klassische Syntax benötigen.
-
Was macht prefers-color-scheme aus?
prefers-color-scheme erkennt, ob der Benutzer einen hellen oder dunklen Thema auf Systemebene gewählt hat. Wenn Sie es mit Medienabfragen kombinieren, können Sie automatisch eine dunkle Farbpalette bereitstellen, ohne dass ein Toggle in der Seite erforderlich ist.
-
Warum werden mehrere Medienfunktionen in einer Abfrage kombiniert?
Die Kombination von Funktionen mit dem und-Operator ermöglicht es, eine einzelne Regel auf einen präzisen Kontext zu zielen, z. B. einen breiten Viewport in dunklem Modus, der auch Hover unterstützt. Dadurch bleibt die Stylesheet-Datei kompakt und vermeidet das Stapeln redundanter Regeln, die manuell synchronisiert werden müssen.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug wurde am Juni 19, 2026 hinzugefügt
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
