Syntax und gängige Breakpoints

Eine Media Query kapselt CSS-Regeln und wendet sie nur an, wenn eine Bedingung erfüllt ist. Die grundlegende Syntax:

Die häufigsten Medientypen:

• all — gilt für alle Ausgabegeräte (Standard)
• screen — Computer- und Smartphonebildschirme
• print — für Druckvorschau und Ausdruck
• speech — Bildschirmleseprogramme

Media Features beschreiben Eigenschaften des Geräts oder Viewports. Häufige Features: width, height, orientation, resolution, prefers-color-scheme, hover.

Das am häufigsten verwendete Feature – richtet sich an Bildschirme ab einer bestimmten Breite. Mobile-First-Ansatz.

Es gibt keine universell richtigen Breakpoints. Eine beliebte Auswahl auf Grundlage gängiger Gerätebreiten:

• 480px — große Smartphones
• 768px — Tablets
• 1024px — kleine Desktopbildschirme, Tablets im Querformat
• 1280px — Standard-Desktopbildschirme
• 1536px — große Desktopbildschirme

Statt Breakpoints für bestimmte Geräte zu verwenden, setzt die moderne Praxis Breakpoints dort, wo der Inhalt umbricht. Entwerfen Sie für eine Größe, ändern Sie die Größe, und fügen Sie einen Breakpoint hinzu, sobald das Layout unvorteilhaft aussieht.

Modernes CSS unterstützt Bereichssyntax innerhalb von Media Queries – sie ist besser lesbar als die Kombination von min und max:

Verwenden Sie and, um mehrere Bedingungen gleichzeitig zu verlangen:

Verwenden Sie not, um eine Media Query zu negieren. Sie gilt für alles, was NICHT mit der Abfrage übereinstimmt:

Trennen Sie mehrere Abfragen durch Kommas – wie eine Selektorliste. Die Stile werden angewendet, wenn EINE der Abfragen zutrifft.

Die Verwendung von em-Einheiten für Breakpoints (statt px) lässt sie mit der bevorzugten Schriftgröße des Browsers skalieren und verbessert dadurch die Barrierefreiheit.

Welche Media Query trifft auf Bildschirme zu, die mindestens 1024px breit sind?

Media Queries wenden CSS abhängig von Geräte- oder Viewport-Eigenschaften bedingt an. Verwenden Sie min-width für einen Mobile-First-Ansatz und max-width für einen Desktop-First-Ansatz. Setzen Sie Breakpoints dort, wo der Inhalt sie benötigt, und nicht bei beliebigen Gerätegrößen. Die moderne Bereichssyntax verbessert die Lesbarkeit.