Media Queries in CSS

Media Queries sind eine CSS-Funktion, mit der du das Aussehen einer Webseite an verschiedene Geräte und Bildschirmgrößen anpassen kannst.

Sie sind die Grundlage für Responsive Webdesign.

Warum brauchst du Media Queries?

Nicht jedes Gerät hat die gleiche Bildschirmgröße.

Grundsyntax

1@media (Bedingung) {
2    CSS-Regeln
3}

Mobile First

Beim Mobile-First-Ansatz schreibst du zuerst die Styles für kleine Bildschirme (Smartphones) – ohne Media Query. Für größere Geräte ergänzt du dann Styles mit min-width. So wächst das Layout Schritt für Schritt mit der Bildschirmgröße.

Im Beispiel siehst du die gängigen Breakpoints – die eigentlichen CSS-Regeln schreibst du in die jeweiligen Blöcke:

1/* Mobile First – Basis-Styles für Smartphones (320–767px) */
2/* CSS-Regeln ohne Media Query */
3
4/* Tablet (768px und größer) */
5@media (min-width: 768px) {
6    /* CSS-Regeln */
7}
8
9/* Laptop (1024px und größer) */
10@media (min-width: 1024px) {
11    /* CSS-Regeln */
12}
13
14/* Desktop (1440px und größer) */
15@media (min-width: 1440px) {
16    /* CSS-Regeln */
17}

• Basis (ohne Query): Styles für Smartphones (320–767px)
• min-width: 768px: Tablet und größer
• min-width: 1024px: Laptop und größer
• min-width: 1440px: Desktop und größer

Desktop First

Mit max-width arbeitest du andersherum – du startest mit dem Desktop-Layout und überschreibst Styles für kleinere Bildschirme:

1/* Desktop First – Basis-Styles für Desktop (1440px und größer) */
2/* CSS-Regeln ohne Media Query */
3
4/* Laptop (max. 1439px) */
5@media (max-width: 1439px) {
6    /* CSS-Regeln */
7}
8
9/* Tablet (max. 1023px) */
10@media (max-width: 1023px) {
11    /* CSS-Regeln */
12}
13
14/* Smartphone (max. 767px) */
15@media (max-width: 767px) {
16    /* CSS-Regeln */
17}

• Basis (ohne Query): Styles für Desktop (1440px und größer)
• max-width: 1439px: Laptop und kleiner
• max-width: 1023px: Tablet und kleiner
• max-width: 767px: Smartphone

min-width

Mit min-width legst du eine Mindestbreite fest. Die CSS-Regeln gelten ab diesem Wert und für alle größeren Bildschirme. Das ist die typische Schreibweise beim Mobile-First-Ansatz.

1@media (min-width: 768px) {
2    /* CSS-Regeln */
3}

Ab 768px Viewport-Breite werden die Regeln im Block angewendet – auf Tablets, Laptops und Desktops.

max-width

Mit max-width legst du eine Maximalbreite fest. Die CSS-Regeln gelten bis zu diesem Wert und für alle kleineren Bildschirme. Das ist die typische Schreibweise beim Desktop-First-Ansatz.

1@media (max-width: 767px) {
2    /* CSS-Regeln */
3}

Bis 767px Viewport-Breite werden die Regeln im Block angewendet – typischerweise auf Smartphones.

Mehrere Bedingungen kombinieren

Du kannst in einer Media Query mehrere Bedingungen verknüpfen – zum Beispiel, um Styles nur für einen bestimmten Bereich oder eine bestimmte Ausrichtung zu definieren.

1/* UND – beide Bedingungen müssen erfüllt sein */
2@media (min-width: 768px) and (max-width: 1023px) {
3    /* CSS-Regeln – nur Tablet-Bereich */
4}
5
6/* ODER – mindestens eine Bedingung muss erfüllt sein */
7@media (max-width: 767px), (orientation: landscape) {
8    /* CSS-Regeln */
9}

• min-width und max-width: Styles nur für einen bestimmten Bereich – z. B. nur Tablets (768px–1023px)
• orientation: landscape: Styles gelten im Querformat – der Bildschirm ist breiter als hoch. Typisches Beispiel: du drehst dein Smartphone auf die Seite.
• Komma-Trennung: dieselben Styles für verschiedene Fälle – z. B. kleine Bildschirme oder Querformat