Media Query Generator mit Breakpoints

Media Queries: Breakpoints und Nutzereinstellungen

Der Media Query Generator setzt CSS Media Queries aus einem Formular zusammen: Breite ab und bis, Medientyp und Merkmale wie Farbschema, reduzierte Bewegung, Hover-Fähigkeit, Zeigertyp, Pixeldichte, Kontrast und Ausrichtung. Heraus kommt eine fertige Regel mit @media und dazu ein JavaScript-Schnipsel mit matchMedia, falls Sie auf dieselbe Bedingung im Skript reagieren wollen. Unter dem Code sehen Sie live, ob die Abfrage in Ihrem Browser gerade zutrifft; ändern Sie die Fenstergröße, um es auszuprobieren.

Für Breakpoints lassen sich die Stufen von Bootstrap 5 und Tailwind CSS übernehmen. Beide Frameworks arbeiten mobil zuerst mit min-width: Die Grundregeln gelten für kleine Bildschirme, größere Bildschirme bekommen Ergänzungen. In der klassischen Schreibweise zieht das Werkzeug von der Höchstbreite 0,02 px ab, damit sich zwei Bereiche wie bis 767,98 px und ab 768 px nicht überschneiden. Die neuere Range-Syntax aus Media Queries Level 4 schreibt (width >= 768px) oder (768px <= width < 1024px) und braucht diesen Trick nicht; sie wird von aktuellen Browsern unterstützt, in Safari seit Version 16.4.

Zwei Merkmale dienen der Barrierefreiheit: prefers-reduced-motion meldet, dass jemand im Betriebssystem Animationen reduziert hat, etwa wegen Schwindel; schalten Sie dann Bewegungen ab oder verkürzen Sie sie. prefers-color-scheme erkennt den Dunkelmodus. hover und pointer helfen, Bedienelemente für Touch größer zu machen. Die aktuelle Fenstergröße und Pixeldichte Ihres Geräts zeigt die Seite Bildschirmauflösung.