Anfänger162025-01-15

CSS Media Queries - Responsive Design

Lerne Media Queries für responsive Webseiten: Breakpoints, mobile-first, min-width/max-width, und responsive Patterns für alle Geräte.

#css#media-queries#responsive#mobile-first#breakpoints

CSS Media Queries - Responsive Design

Media Queries ermöglichen es, CSS an verschiedene Bildschirmgrößen und Geräte anzupassen. Essentiell für modernes Webdesign!

Was sind Media Queries?

Media Queries sind Bedingungen für CSS:

/* Wenn Bildschirm mindestens 768px breit ist */
@media (min-width: 768px) {
    /* Styles nur für Tablet & Desktop */
}

Wofür?

  • ✅ Responsive Design (Mobile, Tablet, Desktop)
  • ✅ Print-Styles
  • ✅ Dark Mode
  • ✅ Accessibility (prefers-reduced-motion)

Basis-Syntax

Media Query Grundstruktur
/* Basis-Struktur */
@media media-type and (condition) {
    /* Styles */
}

/* Beispiel */
@media screen and (min-width: 768px) {
    .container {
        max-width: 1200px;
    }
}

min-width vs. max-width

Die zwei wichtigsten Bedingungen:

min-width - Mindestbreite

min-width - Ab dieser Breite
/* Ab 768px aufwärts */
@media (min-width: 768px) {
    .container {
        padding: 40px;
    }
}

/* Bedeutet: Wenn Bildschirm >= 768px */

Für: Mobile-First Approach ⭐

max-width - Maximalbreite

max-width - Bis zu dieser Breite
/* Bis 767px */
@media (max-width: 767px) {
    .container {
        padding: 20px;
    }
}

/* Bedeutet: Wenn Bildschirm <= 767px */

Für: Desktop-First Approach

Mobile-First vs. Desktop-First

Mobile-First (Empfohlen!)

Start bei Mobile, dann größere Bildschirme:

Mobile-First Approach
/* Basis-Styles (Mobile) */
.container {
    padding: 20px;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;  /* 1 Spalte */
    gap: 20px;
}

/* Tablet (ab 768px) */
@media (min-width: 768px) {
    .container {
        padding: 40px;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);  /* 2 Spalten */
    }
}

/* Desktop (ab 1024px) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .grid {
        grid-template-columns: repeat(4, 1fr);  /* 4 Spalten */
    }
}

Vorteile:

  • ✅ Performance (Mobile-Styles werden immer geladen)
  • ✅ Zukunftssicher (neue große Bildschirme)
  • ✅ Besseres Mobile-Erlebnis

Desktop-First

Start bei Desktop, dann kleinere Bildschirme:

Desktop-First Approach
/* Basis-Styles (Desktop) */
.container {
    max-width: 1200px;
    padding: 40px;
}

.grid {
    grid-template-columns: repeat(4, 1fr);
}

/* Tablet (bis 1023px) */
@media (max-width: 1023px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (bis 767px) */
@media (max-width: 767px) {
    .container {
        padding: 20px;
    }

    .grid {
        grid-template-columns: 1fr;
    }
}

Meist nicht empfohlen (außer für spezielle Fälle)

Standard Breakpoints

Gängige Bildschirmgrößen:

Typische Breakpoints
/* Mobile (Default) */
/* < 768px */

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

/* Desktop */
@media (min-width: 1024px) {
    /* Styles */
}

/* Large Desktop */
@media (min-width: 1280px) {
    /* Styles */
}

Populäre Frameworks:

Framework Breakpoints
/* Tailwind CSS */
/* sm:  640px */
/* md:  768px */
/* lg:  1024px */
/* xl:  1280px */
/* 2xl: 1536px */

/* Bootstrap */
/* sm:  576px */
/* md:  768px */
/* lg:  992px */
/* xl:  1200px */
/* xxl: 1400px */

Empfehlung für eigene Projekte:

Eigene Breakpoints
:root {
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* Mobile: < 768px */
/* Tablet: 768px - 1023px */
/* Desktop: >= 1024px */

Mehrere Bedingungen kombinieren

AND - Beide Bedingungen

AND - Mehrere Bedingungen
/* Zwischen 768px und 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Nur Tablet */
    .container {
        max-width: 960px;
    }
}

OR - Eine von mehreren

OR (Komma)
/* Mobile ODER sehr große Bildschirme */
@media (max-width: 767px), (min-width: 1920px) {
    /* Spezielle Styles */
}

NOT - Negation

NOT - Umkehrung
/* Alles AUSSER Print */
@media not print {
    .no-print {
        display: block;
    }
}

Orientierung - Portrait vs. Landscape

orientation
/* Hochformat (typisch Mobile) */
@media (orientation: portrait) {
    .sidebar {
        width: 100%;
    }
}

/* Querformat (typisch Desktop) */
@media (orientation: landscape) {
    .sidebar {
        width: 250px;
    }
}

Spezifische Media Features

Width & Height

Width & Height Queries
/* Genaue Breite */
@media (width: 768px) {
    /* Nur bei exakt 768px */
}

/* Mindesthöhe */
@media (min-height: 600px) {
    .sidebar {
        min-height: 100vh;
    }
}

/* Maximalhöhe */
@media (max-height: 500px) {
    .header {
        height: 50px;  /* Kleiner Header */
    }
}

aspect-ratio

Seitenverhältnis
/* 16:9 Bildschirm */
@media (aspect-ratio: 16/9) {
    /* Styles für 16:9 */
}

/* Mindest-Seitenverhältnis */
@media (min-aspect-ratio: 16/9) {
    /* Breite Bildschirme */
}

Praktische Beispiele

Beispiel 1: Responsive Navigation

Mobile Navigation
/* Mobile: Hamburger Menu */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.navbar-links {
    display: none;  /* Versteckt auf Mobile */
}

.hamburger {
    display: block;
}

/* Desktop: Normale Navigation */
@media (min-width: 768px) {
    .navbar-links {
        display: flex;
        gap: 20px;
    }

    .hamburger {
        display: none;  /* Versteckt auf Desktop */
    }
}

Beispiel 2: Responsive Grid

Responsive Card Grid
/* Mobile: 1 Spalte */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Tablet: 2 Spalten */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 Spalten */
@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* Large Desktop: 4 Spalten */
@media (min-width: 1280px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Beispiel 3: Responsive Typography

Responsive Text
/* Mobile */
html {
    font-size: 14px;
}

h1 {
    font-size: 2rem;  /* 28px */
}

/* Tablet */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    h1 {
        font-size: 2.5rem;  /* 40px */
    }
}

/* Desktop */
@media (min-width: 1024px) {
    html {
        font-size: 18px;
    }

    h1 {
        font-size: 3rem;  /* 54px */
    }
}

Beispiel 4: Container Query (Modern!)

Container Queries (Neu!)
/* Container definieren */
.card-container {
    container-type: inline-size;
}

/* Query basierend auf Container-Breite */
@container (min-width: 400px) {
    .card {
        flex-direction: row;
    }
}

/* Statt Viewport-Breite! */

Print-Styles

Styles fürs Drucken:

Print Media Query
@media print {
    /* Verstecke Navigation */
    .navbar,
    .sidebar {
        display: none;
    }

    /* Keine Hintergrundfarben (Tinte sparen) */
    body {
        background-color: white;
        color: black;
    }

    /* Seitenumbrüche */
    h1 {
        page-break-after: avoid;
    }

    /* Links sichtbar machen */
    a::after {
        content: " (" attr(href) ")";
    }
}

Dark Mode / Light Mode

prefers-color-scheme
/* Light Mode (Standard) */
:root {
    --bg-color: white;
    --text-color: black;
}

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

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1a1a1a;
        --text-color: #f0f0f0;
    }
}

Accessibility Media Queries

prefers-reduced-motion

Reduced Motion
/* Standard: Mit Animationen */
.element {
    transition: transform 0.3s;
}

/* Nutzer möchte weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
    .element {
        transition: none;
    }

    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

prefers-contrast

Hoher Kontrast
/* Standard */
.button {
    background-color: #007bff;
    border: 1px solid #007bff;
}

/* Hoher Kontrast gewünscht */
@media (prefers-contrast: high) {
    .button {
        border-width: 2px;
        outline: 2px solid black;
    }
}

Vollständiges Responsive Beispiel

Complete Responsive Layout
/* =========================
   MOBILE FIRST (< 768px)
   ========================= */

.container {
    width: 100%;
    padding: 20px;
}

.header {
    padding: 15px 0;
}

.main {
    display: flex;
    flex-direction: column;
}

.sidebar {
    order: 2;  /* Nach Content */
    margin-top: 20px;
}

.content {
    order: 1;
}

.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

/* =========================
   TABLET (768px - 1023px)
   ========================= */

@media (min-width: 768px) {
    .container {
        padding: 40px;
    }

    .header {
        padding: 20px 0;
    }

    .main {
        flex-direction: row;
        gap: 30px;
    }

    .sidebar {
        order: 1;
        flex: 0 0 250px;
        margin-top: 0;
    }

    .content {
        order: 2;
        flex: 1;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* =========================
   DESKTOP (1024px+)
   ========================= */

@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .sidebar {
        flex: 0 0 300px;
    }

    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* =========================
   LARGE DESKTOP (1280px+)
   ========================= */

@media (min-width: 1280px) {
    .container {
        max-width: 1400px;
    }

    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Best Practices

✅ DO:

  1. Mobile-First Approach nutzen
  2. Wenige Breakpoints (3-4 reichen meist)
  3. Content-basierte Breakpoints (nicht device-basiert)
  4. rem statt px für Breakpoints
  5. Logische Reihenfolge (erst Mobile, dann größer)
  6. Touch-friendly auf Mobile (min 44x44px für Buttons)

❌ DON'T:

  1. Nicht zu viele Breakpoints (3-4 reichen!)
  2. Nicht device-spezifisch (nicht "iPad", "iPhone")
  3. Nicht wichtigen Content auf Mobile verstecken
  4. Nicht separate Mobile-Site bauen
  5. Nicht Desktop-Styles auf Mobile laden (Performance!)

Debugging-Tipps

Browser DevTools:

DevTools nutzen
/* Chrome DevTools */
/* 1. F12 öffnen */
/* 2. Device Toolbar (Ctrl+Shift+M) */
/* 3. Verschiedene Geräte testen */

/* Responsive View */
/* Zeigt aktuelle Breakpoints an */

In CSS debuggen:

Media Query Debug
/* Temporär: Farben für Breakpoints */
body::before {
    content: 'Mobile';
    position: fixed;
    top: 0;
    right: 0;
    background: red;
    color: white;
    padding: 5px 10px;
    z-index: 9999;
}

@media (min-width: 768px) {
    body::before {
        content: 'Tablet';
        background: blue;
    }
}

@media (min-width: 1024px) {
    body::before {
        content: 'Desktop';
        background: green;
    }
}

📝 Quiz

Was ist der Unterschied zwischen min-width und max-width?

📝 Quiz

Warum ist Mobile-First empfohlen?

⚡

Tipps & Tricks

Container Queries statt Media Queries

Moderne Alternative für Komponenten die sich an ihren Container anpassen:

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

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }
}

Vorteil: Komponente passt sich an Container an, nicht am Viewport!

Custom Breakpoints mit CSS Variables

Zentrale Verwaltung von Breakpoints:

:root {
    --mobile: 480px;
    --tablet: 768px;
    --desktop: 1024px;
    --wide: 1280px;
}

/* Nutze in Media Queries (mit calc wenn nötig) */
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }

Kombinierte Media Queries für spezifische Cases

Nutze mehrere Bedingungen zusammen:

/* Nur Tablet im Landscape */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
    .content { padding: 20px 40px; }
}

/* Dark Mode UND Desktop */
@media (prefers-color-scheme: dark) and (min-width: 1024px) {
    body { background: #1a1a1a; }
}

/* Touch-Geräte mit großem Bildschirm */
@media (min-width: 768px) and (hover: none) {
    button { min-height: 48px; }
}

Fluid zwischen Breakpoints mit clamp()

Vermeide zu viele Media Queries:

/* Automatische Anpassung zwischen Min und Max */
h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    /* Min: 2rem, Ideal: 5vw, Max: 4rem */
}

.container {
    width: clamp(320px, 90%, 1200px);
    padding: clamp(1rem, 5vw, 3rem);
}

Übungsaufgaben

Aufgabe 1: Responsive Grid

Erstelle ein responsive Grid:

  • Mobile: 1 Spalte
  • Tablet: 2 Spalten
  • Desktop: 3 Spalten
  • Mobile-First Approach

Aufgabe 2: Navigation

Erstelle eine Navigation:

  • Mobile: Hamburger Menu
  • Desktop: Horizontale Links
  • Breakpoint bei 768px

Aufgabe 3: Typography

Erstelle responsive Schriftgrößen:

  • Mobile: 14px Basis
  • Tablet: 16px Basis
  • Desktop: 18px Basis
  • Alle mit rem

Nächste Schritte

Du kennst jetzt:

  • ✅ Media Queries (@media)
  • ✅ min-width vs. max-width
  • ✅ Mobile-First Approach
  • ✅ Standard Breakpoints
  • ✅ Kombinierte Bedingungen
  • ✅ Print-Styles & Dark Mode
  • ✅ Accessibility Queries

Als Nächstes lernst du:

  • CSS Variables (Custom Properties)
  • Pseudo-Classes (:hover, :focus, etc.)
  • Pseudo-Elements (::before, ::after)

Weiter so! 🚀

← CSS•Lektion 11 von 16
69% abgeschlossen
Lektion abgeschlossen!

Gut gemacht! 🎉

Du hast "CSS Media Queries - Responsive Design" abgeschlossen

Vorherige Lektion
CSS Transforms - rotate, scale, translate & mehr
Nächste Lektion
CSS Variables (Custom Properties) - Dynamische Werte
Alle Lektionen anzeigen

Artikel bewerten

0.0 (0 Bewertungen)

Bitte einloggen um zu bewerten

Das könnte dich auch interessieren

CSS Backgrounds & Borders - Hintergründe & Rahmen stylen

Lerne alles über CSS Backgrounds (Farben, Bilder, Gradients) und Borders (border-radius, box-shadow) für modernes Design.

Anfängercss

CSS Basics - Deine Seite gestalten

Lerne, wie du mit CSS deine HTML-Seiten zum Leben erweckst. Farben, Schriftarten, Layouts - alles was du für schöne Webseiten brauchst.

Anfängercss

CSS Box Model - margin, padding, border verstehen

Lerne das CSS Box Model verstehen: Content, Padding, Border, Margin und den Unterschied zwischen box-sizing: content-box und border-box.

Anfängercss
Zurück zu CSS