Was ist eine CSS-Medienabfrage?

Eine CSS-Medienabfrage ist eine Technik, die es ermöglicht, unterschiedliche Stile basierend auf Geräteeigenschaften wie Bildschirmgröße, Auflösung, Ausrichtung oder Farbschema anzuwenden. Medienabfragen sind die Grundlage des responsiven Webdesigns und ermöglichen es Websites, ihr Layout und Erscheinungsbild auf verschiedenen Geräten anzupassen - von Smartphones bis zu Desktop-Monitoren. Sie verwenden die @media-Regel in CSS, um Stile nur dann bedingt anzuwenden, wenn bestimmte Bedingungen erfüllt sind.

Werkzeugbeschreibung

Dieses Tool hilft Ihnen, CSS-Medienabfragen zu generieren, ohne sich komplexe Syntax merken zu müssen. Wählen Sie einfach Ihren Ziel-Medientyp, geben Sie die Abmessungen an, wählen Sie die Gerätefunktionen aus, und das Tool generiert die vollständige @media-Regel, die sofort in Ihren Stylesheets verwendet werden kann. Es unterstützt alle modernen Medienabfrage-Funktionen, einschließlich Viewport-Abmessungen, Bildschirmausrichtung, Seitenverhältnisse, Auflösungserkennung und Farbschema-Präferenzen.

Funktionen

  • Medientyp-Auswahl: Wählen Sie zwischen den Medientypen all, screen, print oder speech
  • Abmessungssteuerung: Legen Sie Mindest- und Maximalbreite/-höhe mit jeder CSS-Einheit fest (px, em, rem, vw usw.)
  • Gerätefunktionen: Konfigurieren Sie Ausrichtung, Seitenverhältnis, Auflösung und Farbschema-Präferenzen