Kostenlose Tutorials für Anfänger

Appearance

Kapitel 17: Medienabfragen (Media Queries) ​

Medienabfragen sind das Herzstück des responsiven Designs! Damit können Sie verschiedene Bildschirmgrößen (Handys, Tablets, Desktop-Computer) abdecken.

17.1 Definition von responsivem Design: Eine Webseite für alle Geräte ​

Responsives Design bedeutet, dass sich eine Webseite automatisch an die Bildschirmgröße des Benutzers anpasst.

🎯 Warum ist das wichtig? ​

  • 📱 Handys: Kleine Bildschirme (unter 768px Breite)
  • 📱 Tablets: Mittlere Bildschirme (768px - 1024px Breite)
  • 💻 Desktop-Computer: Große Bildschirme (über 1024px Breite)

💡 Chinesische Internet-Nutzer ​

In China ist die mobile Nutzung sehr hoch! Die meisten Menschen surfen mit dem Handy im Internet. Ihre Webseite muss auf Handys gut aussehen!

17.2 Medienabfragen-Syntax: @media Bedingung ​

Medienabfragen verwenden die @media-Regel.

📝 Syntax ​

css
@media (bedingung) {
    /* Hier kommen CSS-Stile, die nur unter dieser Bedingung angewendet werden */
}

🎯 Beispiel ​

css
/* Stile für alle Bildschirme (Standard) */
body {
    font-size: 16px;
}

/* WENN die Bildschirmbreite 768px oder weniger beträgt (Handy) */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Kleinere Schrift auf Handys */
    }
}

Erklärung:

  • @media (max-width: 768px) { ... }: Diese Stile werden nur angewendet, wenn die Bildschirmbreite 768px oder weniger beträgt.

17.3 Häufige Geräteabmessungen (Breakpoints) ​

Sie müssen nicht für jedes einzelne Gerät designen. Verwenden Sie Breakpoints (Umbruchspunkte) für allgemeine Kategorien.

📊 Empfohlene Breakpoints (Sehr häufig verwendet!) ​

GerätBreakpoint (Bildschirmbreite)
Handy (Hochformat)max-width: 480px
Handy (Querformat) / Kleines Tabletmax-width: 768px (Sehr häufig!)
Tabletmin-width: 769px und max-width: 1024px
Desktopmin-width: 1025px

🎯 Beispiel: Drei Breakpoints ​

css
/* ===== Desktop (Standard) ===== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== Tablet (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    .container {
        max-width: 90%; /* Breiter auf Tablets */
        padding: 15px;
    }
}

/* ===== Handy (max-width: 768px) ===== */
@media (max-width: 768px) {
    .container {
        max-width: 100%; /* Volle Breite auf Handys */
        padding: 10px;
    }
}

17.4 Responsive Design-Tipps: Fließende Layouts, Flexbox, versteckte Elemente ​

1. Fließende Layouts (Relative Einheiten verwenden) ​

Verwenden Sie relative Einheiten (%, rem, em, vw, vh) statt fester Einheiten (px).

Schlecht (feste Einheiten):

css
.container {
    width: 1200px; /* Zu breit für Handys! */
}

Gut (relative Einheiten):

css
.container {
    width: 90%;          /* 90% der Breite des Elternelements */
    max-width: 1200px; /* Maximal 1200px */
    margin: 0 auto;     /* Zentriert */
}

2. Flexbox und Grid (Für responsive Layouts) ​

Flexbox und Grid machen responsive Design viel einfacher!

Beispiel (Flexbox):

css
/* Navigation standardmäßig nebeneinander */
.nav {
    display: flex;
    justify-content: space-between;
}

/* Auf Handys untereinander */
@media (max-width: 768px) {
    .nav {
        flex-direction: column; /* Untereinander anordnen */
        align-items: center;
    }
}

3. Elemente verstecken/anzeigen (display: none;) ​

Auf Handys können Sie unwichtige Elemente verstecken, um Platz zu sparen.

Beispiel:

css
/* Sidebar auf Desktop anzeigen */
.sidebar {
    display: block;
}

/* Sidebar auf Handys verstecken */
@media (max-width: 768px) {
    .sidebar {
        display: none; /* Versteckt! */
    }
}

17.5 Anfänger-Tipps: Medienabfragen-Reihenfolge ​

Die Reihenfolge Ihrer Medienabfragen ist sehr wichtig!

❌ Schlechte Reihenfolge (Mobile-First verletzt) ​

css
/* Zuerst Handy-Stile */
@media (max-width: 768px) {
    .box {
        width: 100%;
    }
}

/* Dann Desktop-Stile */
.box {
    width: 50%;
}

Problem: CSS wird von oben nach unten gelesen. Der Desktop-Stil (width: 50%;) würde den Handy-Stil (width: 100%;) überschreiben, weil er später kommt!

✅ Gute Reihenfolge (Mobile-First!) ​

Mobile-First bedeutet: Schreiben Sie zuerst die Stile für kleine Bildschirme (Handys), dann für größere Bildschirme (Tablets/Desktop).

css
/* ===== Zuerst: Handy-Stile (Standard) ===== */
.box {
    width: 100%; /* Volle Breite auf Handys */
}

/* ===== Dann: Tablet/Desktop-Stile ===== */
@media (min-width: 769px) {
    .box {
        width: 50%; /* Halbe Breite auf größeren Bildschirmen */
    }
}

💡 Warum Mobile-First?

  • ✅ Bessere Leistung: Handys müssen weniger CSS herunterladen
  • ✅ Einfacheres Design: Von einfach (Handy) zu komplex (Desktop) ist leichter

17.6 Praxis: Responsive Navigationsleiste, responsive Kartenanordnung ​

Lassen Sie uns das Gelernte in praktischen Beispielen anwenden!

🎯 Beispiel 1: Responsive Navigationsleiste ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="main-nav">
        <div class="logo">Meine Webseite</div>
        <ul class="nav-links">
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

CSS (style.css):

css
/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* ===== Navigation (Mobile-First!) ===== */
.main-nav {
    display: flex;
    flex-direction: column; /* Mobile: Untereinander */
    align-items: center;
    background-color: #333333;
    padding: 20px;
}

.logo {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.nav-links {
    list-style-type: none;
    display: flex;
    flex-direction: column; /* Mobile: Untereinander */
    gap: 10px;
    text-align: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #4CAF50;
}

/* ===== Tablet/Desktop (ab 769px Breite) ===== */
@media (min-width: 769px) {
    .main-nav {
        flex-direction: row; /* Desktop: Nebeneinander */
        justify-content: space-between; /* Logo links, Links rechts */
    }
    
    .logo {
        margin-bottom: 0; /* Margin entfernen */
    }
    
    .nav-links {
        flex-direction: row; /* Desktop: Nebeneinander */
        gap: 20px;
    }
}

🔍 Erklärung:

  1. Mobile-First: Navigation ist untereinander (Spalte) auf Handys.
  2. @media (min-width: 769px) { ... }: Wenn die Breite 769px oder mehr beträgt (Tablet/Desktop), wird die Navigation nebeneinander (Zeile) angeordnet.

🎯 Beispiel 2: Responsive Kartenanordnung (Flexbox + Grid) ​

HTML (index.html):

html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Karten</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div class="card">Karte 1</div>
        <div class="card">Karte 2</div>
        <div class="card">Karte 3</div>
        <div class="card">Karte 4</div>
    </div>
</body>
</html>

CSS (style.css):

css
/* ===== Reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    padding: 20px;
    background-color: #f0f0f0;
}

/* ===== Karten-Container (Mobile-First!) ===== */
.card-container {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: Eine Spalte */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Karten */
.card {
    background-color: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
}

/* ===== Tablet (ab 769px Breite) ===== */
@media (min-width: 769px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr); /* Tablet: Zwei Spalten */
    }
}

/* ===== Desktop (ab 1025px Breite) ===== */
@media (min-width: 1025px) {
    .card-container {
        grid-template-columns: repeat(4, 1fr); /* Desktop: Vier Spalten */
    }
}

🔍 Erklärung:

  1. Mobile-First: Karten sind untereinander (1 Spalte) auf Handys.
  2. @media (min-width: 769px) { ... }: Auf Tablets werden Karten in 2 Spalten angeordnet.
  3. @media (min-width: 1025px) { ... }: Auf Desktop-Computern werden Karten in 4 Spalten angeordnet.

📝 Zusammenfassung ​

In diesem Kapitel haben Sie gelernt:

  • ✅ Was responsives Design ist (Eine Webseite für alle Geräte)
  • ✅ Medienabfragen-Syntax (@media Bedingung { ... })
  • ✅ Häufige Geräteabmessungen (Breakpoints: 768px, 1024px)
  • ✅ Responsive Design-Tipps (fließende Layouts, Flexbox/Grid, versteckte Elemente)
  • ✅ Dass Mobile-First die beste Reihenfolge ist
  • ✅ Praktische Beispiele: Responsive Navigationsleiste, responsive Kartenanordnung

🎯 Nächste Schritte ​

Im nächsten Kapitel werden wir:

  1. CSS-Reset und normalize.css erlernen
  2. Standard-Stile vereinheitlichen
  3. Praktische Projekte zur Stilvereinheitlichung erstellen

Bereit für mehr? Los geht's! 🎨

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials