Kapitel 9: Responsives Design (Mobile, Tablet)

9.1 Responsive Grundprinzipien (Media Queries)

Was ist Responsive Design?

Responsive Design sorgt dafür, dass Ihre Website auf allen Geräten (Desktop, Tablet, Smartphone) gut aussieht.

Media Queries

CSS-Media-Queries passen Styles basierend auf Bildschirmgröße an.

Grundstruktur:

css

/* Desktop (Standard) */
.container {
    max-width: 1200px;
}

/* Tablet */
@media (max-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* Smartphone (Horizontal) */
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }
}

/* Smartphone (Vertikal) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

Häufig verwendete Breakpoints

Gerät	Breite
Desktop (Groß)	1200px+
Desktop (Klein)	992px - 1199px
Tablet (Horizontal)	768px - 991px
Smartphone (Horizontal)	576px - 767px
Smartphone (Vertikal)	< 576px

9.2 Theme responsiv anpassen

Schritt 1: Viewport setzen

Fügen Sie in header.php innerhalb des <head>-Tags hinzu:

php

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Schritt 2: Grid-Layout für Blog

Desktop: 2-Spalten (Inhalt + Sidebar) Mobile: 1-Spalte

css

/* Desktop */
.site-content .container {
    display: flex;
    gap: 30px;
}

.site-main {
    flex: 1;
    min-width: 0; /* Wichtig für Flexbox */
}

.widget-area {
    width: 300px;
}

/* Tablet & Smartphone */
@media (max-width: 768px) {
    .site-content .container {
        flex-direction: column;
    }

    .widget-area {
        width: 100%;
        margin-top: 30px;
    }
}

Schritt 3: Beiträge-Grid

css

/* Desktop: 2 Spalten */
.posts-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

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

/* Smartphone: 1 Spalte */
@media (max-width: 768px) {
    .posts-container {
        grid-template-columns: 1fr;
    }
}

9.3 Bilder responsiv machen

CSS für responsive Bilder

css

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

.post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

WordPress Bildgrößen anpassen

Fügen Sie in functions.php hinzu:

php

function mein_theme_image_sizes() {
    add_image_size('mein-theme-blog', 800, 500, true); // Hard crop
    add_image_size('mein-theme-sidebar', 100, 100, true);
}
add_action('after_setup_theme', 'mein_theme_image_sizes');

Verwendung in Template:

php

<?php the_post_thumbnail('mein-theme-blog'); ?>

9.4 Typografie responsiv anpassen

Schriftgrößen anpassen

css

/* Desktop */
.entry-title {
    font-size: 2rem;
}

/* Tablet */
@media (max-width: 1024px) {
    .entry-title {
        font-size: 1.8rem;
    }
}

/* Smartphone */
@media (max-width: 768px) {
    .entry-title {
        font-size: 1.5rem;
    }
    
    body {
        font-size: 15px;
    }
}

(Siehe Kapitel 8.5 für Details)

9.6 Testen mit Browser-Entwicklertools

Chrome DevTools verwenden

Öffnen Sie Ihre Website
Drücken Sie F12 oder Rechtsklick → Untersuchen
Klicken Sie auf das Smartphone-Symbol (Toggle Device Toolbar)
Wählen Sie ein Gerät aus (z.B. iPhone, iPad)

Zu testende Geräte

✅ iPhone (Safari)
✅ Android (Chrome)
✅ iPad (Safari)
✅ Desktop (Chrome, Firefox, Edge)

Häufige Probleme

Problem: Menü ist auf Mobile nicht klickbar Lösung: JavaScript für Toggle hinzufügen

Problem: Bilder überlaufen den Bildschirm Lösung: max-width: 100% setzen

Problem: Text ist auf Mobile zu klein Lösung: font-size in Media Query erhöhen

📝 Übung 9: Theme responsiv machen

Ziel: Machen Sie Ihr Theme responsiv.

Schritte:

Fügen Sie den Viewport-Meta-Tag in header.php hinzu
Fügen Sie Media Queries für Tablet und Smartphone hinzu
Testen Sie mit Browser-Entwicklungstools
Korrigieren Sie Anzeigefehler

✅ Zusammenfassung

In diesem Kapitel haben Sie gelernt:

✅ Media Queries zu verwenden
✅ Ein 2-Spalten-Layout responsiv zu machen
✅ Bilder responsiv zu skalieren
✅ Typografie anzupassen
✅ Das Theme mit Browser-Tools zu testen

Nächstes Kapitel: Wir beginnen mit Praxisprojekten!

➡️ Zu Kapitel 10: Blog-Theme erstellen →

Kapitel 9: Responsives Design (Mobile, Tablet) ​

9.1 Responsive Grundprinzipien (Media Queries) ​

Was ist Responsive Design? ​

Media Queries ​

Häufig verwendete Breakpoints ​

9.2 Theme responsiv anpassen ​

Schritt 1: Viewport setzen ​

Schritt 2: Grid-Layout für Blog ​

Schritt 3: Beiträge-Grid ​

9.3 Bilder responsiv machen ​

CSS für responsive Bilder ​

WordPress Bildgrößen anpassen ​

9.4 Typografie responsiv anpassen ​

Schriftgrößen anpassen ​

9.5 Navigation responsiv anpassen ​

9.6 Testen mit Browser-Entwicklertools ​

Chrome DevTools verwenden ​

Zu testende Geräte ​

Häufige Probleme ​

📝 Übung 9: Theme responsiv machen ​

✅ Zusammenfassung ​