CSS Media Queries sind eine Technik in CSS, mit der sich das Layout einer Webseite an verschiedene Bildschirmgrößen, Auflösungen und Gerätetypen anpassen lässt. Sie sind ein zentraler Bestandteil des Responsive Web Designs.

Syntax:

@media (Bedingung) {
    /* CSS-Regeln, die nur unter dieser Bedingung gelten */
}

Beispiele:

1. Anpassung an verschiedene Bildschirmbreiten:

/* Für Bildschirme mit maximal 600px Breite (z. B. Smartphones) */
@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

2. Unterscheidung zwischen Hoch- und Querformat:

@media (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

3. Spezielle Stile für Druckausgabe:

@media print {
    body {
        font-size: 12pt;
        color: black;
        background: none;
    }
}

Typische Anwendungsfälle:

✅ Mobile-First-Design: Webseiten für kleine Displays optimieren und dann für größere Bildschirme erweitern.
✅ Dark Mode: Stile je nach Nutzerpräferenz anpassen (prefers-color-scheme).
✅ Retina-Displays: Hochauflösende Bilder oder spezielle Stile für Displays mit hoher Pixeldichte (min-resolution: 2dppx).

Was ist Responsive Design?

Responsive Design ist eine Technik im Webdesign, bei der sich eine Website automatisch an verschiedene Bildschirmgrößen und Geräte anpasst. Dadurch bleibt die Benutzerfreundlichkeit sowohl auf großen Desktop-Monitoren als auch auf Tablets und Smartphones erhalten, ohne dass separate Versionen der Website erforderlich sind.

Wie funktioniert Responsive Design?

Responsive Design wird durch folgende Techniken umgesetzt:

1. Flexible Layouts

• Die Website verwendet prozentuale Breiten anstelle fester Pixelwerte, sodass sich Elemente dynamisch anpassen.

2. Media Queries (CSS)

• Über CSS Media Queries kann das Layout je nach Bildschirmgröße angepasst werden. Beispiel:

@media (max-width: 768px) {
    body {
        background-color: lightgray;
    }
}

• → Dieser Code ändert die Hintergrundfarbe für Bildschirme kleiner als 768px.

3. Flexible Bilder und Medien

• Bilder und Videos passen sich automatisch der Bildschirmbreite an, oft mit:

img {
    max-width: 100%;
    height: auto;
}

4. Mobile-First Ansatz

• Das Design wird zuerst für kleine Bildschirme entwickelt und anschließend für größere Displays erweitert.

Vorteile von Responsive Design

✅ Bessere Nutzererfahrung auf allen Geräten
✅ SEO-Vorteile, da Google mobilfreundliche Seiten bevorzugt
✅ Keine doppelte Wartung für Desktop- und Mobile-Versionen
✅ Höhere Conversion-Rate, weil Nutzer die Seite einfacher bedienen können

Fazit

Responsive Design ist heute Standard im modernen Webdesign, da es eine optimale Darstellung und Bedienbarkeit auf allen Geräten ermöglicht.