Media Queries

Media Queries sind das Werkzeug fuer gezielte Anpassungen an verschiedene Bildschirmgroessen und Geraetetypen. Sie ergaenzen fluid Layouts, wenn du bei bestimmten Breakpoints das Design aendern musst.

Grundsyntax

@media (Bedingung) {
    /* CSS-Regeln hier */
}

Einfaches Beispiel

/* Standard: Einspaltiges Layout */
.container {
    display: grid;
    grid-template-columns: 1fr;
}

/* Ab 768px: Zweispaltiges Layout */
@media (min-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Ab 1024px: Dreispaltiges Layout */
@media (min-width: 1024px) {
    .container {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

min-width vs. max-width

min-width (Mobile First — empfohlen!)

/* Basis: Mobile (kleiner Bildschirm) */
.nav-links {
    display: none;
}

/* Ab Tablet-Groesse: Navigation anzeigen */
@media (min-width: 768px) {
    .nav-links {
        display: flex;
    }
}

max-width (Desktop First)

/* Basis: Desktop (grosser Bildschirm) */
.nav-links {
    display: flex;
}

/* Bis Tablet: Navigation verstecken */
@media (max-width: 767px) {
    .nav-links {
        display: none;
    }
}

Empfehlung: Verwende min-width (Mobile First)! Mehr dazu im naechsten Kapitel.

Gaengige Breakpoints

/* Smartphones */
@media (min-width: 480px) { }

/* Tablets */
@media (min-width: 768px) { }

/* Kleine Desktops / Laptops */
@media (min-width: 1024px) { }

/* Grosse Desktops */
@media (min-width: 1280px) { }

/* Extra grosse Bildschirme */
@media (min-width: 1536px) { }

Wichtig: Waehle Breakpoints basierend auf deinem Design, nicht auf bestimmten Geraeten. Wenn das Layout bei 850px bricht, setze den Breakpoint dort — nicht bei 768px, nur weil das ein “Standard” ist.

Breakpoints kombinieren

Bereich definieren

/* Nur zwischen 768px und 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar {
        display: none;
    }
}

Moderne Range-Syntax

/* Moderner und lesbarer (ab 2023 in allen Browsern) */
@media (768px <= width < 1024px) {
    .sidebar {
        display: none;
    }
}

@media (width >= 1024px) {
    .container {
        grid-template-columns: 250px 1fr;
    }
}

Praktisches Beispiel: Responsive Navigation

<header class="header">
    <nav class="nav">
        <a href="/" class="logo">MySite</a>
        <button class="menu-toggle" aria-label="Menue oeffnen">
            &#9776;
        </button>
        <ul class="nav-links">
            <li><a href="/">Home</a></li>
            <li><a href="/about">Ueber uns</a></li>
            <li><a href="/services">Services</a></li>
            <li><a href="/kontakt">Kontakt</a></li>
        </ul>
    </nav>
</header>

/* Basis: Mobile */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #1a1a2e;
}

.logo {
    color: #e44d26;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

.menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.nav-links {
    display: none;  /* Auf Mobile versteckt */
    list-style: none;
    margin: 0;
    padding: 1rem;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #1a1a2e;
}

.nav-links a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 0.75rem 0;
}

/* Tablet und groesser */
@media (min-width: 768px) {
    .menu-toggle {
        display: none;  /* Hamburger-Button verstecken */
    }

    .nav-links {
        display: flex;    /* Links anzeigen */
        position: static; /* Aus dem absoluten Flow nehmen */
        gap: 2rem;
        padding: 0;
    }

    .nav-links a {
        padding: 0;
    }
}

Media Queries fuer Nutzerpraeferenzen

Dark Mode

/* Helles Design (Standard) */
:root {
    --bg: #ffffff;
    --text: #1a1a2e;
    --accent: #e44d26;
}

/* Dunkles Design, wenn der Nutzer es bevorzugt */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1a2e;
        --text: #e2e8f0;
        --accent: #f59e0b;
    }
}

body {
    background: var(--bg);
    color: var(--text);
}

Reduzierte Bewegung

/* Animationen fuer alle */
.card {
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

/* Animationen deaktivieren, wenn gewuenscht */
@media (prefers-reduced-motion: reduce) {
    .card {
        transition: none;
    }

    .card:hover {
        transform: none;
    }
}

Kontrast-Praeferenz

@media (prefers-contrast: high) {
    :root {
        --text: #000000;
        --bg: #ffffff;
        --border: 2px solid #000000;
    }
}

Container Queries

Container Queries sind eine Revolution im Responsive Design. Statt auf die Viewport-Breite zu reagieren, reagieren sie auf die Breite des Eltern-Containers:

/* Container definieren */
.card-wrapper {
    container-type: inline-size;
    container-name: card;
}

/* Styles basierend auf Container-Breite */
@container card (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 1rem;
    }
}

@container card (min-width: 600px) {
    .card {
        grid-template-columns: 300px 1fr;
    }

    .card h3 {
        font-size: 1.5rem;
    }
}

Container Query Einheiten

.card-wrapper {
    container-type: inline-size;
}

.card h3 {
    font-size: clamp(1rem, 5cqi, 2rem);
    /* cqi = 1% der Container-Inline-Groesse */
}

Einheit	Bedeutung
cqw	1% der Container-Breite
cqh	1% der Container-Hoehe
cqi	1% der Container-Inline-Groesse
cqb	1% der Container-Block-Groesse

Media Queries fuer Print

@media print {
    /* Navigation und Footer verstecken */
    nav, footer, .sidebar {
        display: none;
    }

    /* Volle Breite fuer den Inhalt */
    main {
        width: 100%;
        max-width: none;
    }

    /* Links als Text anzeigen */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Seitenumbrueche kontrollieren */
    h2, h3 {
        break-after: avoid;
    }
}

Uebungen

Uebung 1: Responsive Navigation

Erstelle eine Navigation, die auf Mobile als vertikales Menue dargestellt wird und auf Desktop als horizontale Leiste.

Uebung 2: Dark Mode

Implementiere einen Dark Mode mit prefers-color-scheme und CSS Custom Properties.

Uebung 3: Container Queries

Erstelle eine Card-Komponente, die sich basierend auf der Container-Breite anpasst — nicht auf der Viewport-Breite.

Was kommt als Naechstes?

Im naechsten Kapitel vertiefen wir den Mobile First Ansatz — die beste Strategie fuer responsives Design:

• Warum Mobile First ueberlegen ist
• Mobile First in der Praxis
• Progressive Enhancement

Zusammenfassung

• Media Queries passen CSS-Regeln an Bedingungen an (Breite, Praeferenzen, etc.)
• min-width (Mobile First) ist besser als max-width (Desktop First)
• Breakpoints sollten sich nach dem Design richten, nicht nach Geraeten
• prefers-color-scheme ermoeglicht Dark Mode, prefers-reduced-motion respektiert Barrierefreiheit
• Container Queries reagieren auf die Container-Breite statt auf den Viewport
• Print-Styles mit @media print optimieren die Druckansicht

---