Media Queries mit Claude Code: CSS Praxisguide
Responsive CSS mit Claude Code: Media Queries, Container Queries, Nutzerpräferenzen und Playwright-Tests.
Eine Seite kann auf dem Laptop ordentlich aussehen und trotzdem dort scheitern, wo Umsatz entsteht: im mobilen Artikel, in einer schmalen Sidebar, im Dark Mode oder in einem Admin-Panel, das stundenlang benutzt wird. Ein Prompt wie „mach es responsive“ ist für Claude Code zu ungenau. Besser sind klare Layoutregeln, Nutzerpräferenzen und Tests.
Eine Media Query wendet CSS abhängig von Browser- oder Gerätebedingungen an. Eine Container Query reagiert auf die Größe des Elterncontainers eines Bausteins. prefers-reduced-motion und prefers-color-scheme respektieren Systemeinstellungen der Nutzer. Primäre Referenzen sind MDN CSS media queries, Using media queries, CSS container queries, CSSWG Media Queries Level 5, W3C CSS Containment Module Level 3 und Playwright emulation.
Passende Grundlagen: CSS Grid mit Claude Code, Flexbox-Muster, Barrierefreiheit und Performance-Optimierung.
Arbeitsregel
Beginne mobile-first. Das kleine Layout ist normales CSS; breitere Layouts kommen mit @media (width >= 48rem) dazu. Wähle Breakpoints nicht nach Gerätenamen, sondern dort, wo Inhalte leiden: Navigation bricht schlecht um, Karten werden eng, Anzeigen rücken zu nah an den Text oder Formulare sind schwer lesbar.
| Entscheidung | Media Queries | Container Queries |
|---|---|---|
| Prüfen | Viewport, Druck, Nutzerpräferenzen | Größe oder Zustand des Elterncontainers |
| Gut für | Seitenlayout, Navigation, globale Abstände | Karten, CTA, Preise, wiederverwendbare UI |
| Häufiger Fehler | Zu viele gerätebasierte Breakpoints | container-type am Elternteil fehlt |
| Prompt | „Layout nach Viewport-Breite ändern“ | „Karte nach verfügbarer Breite ändern“ |
Praxisfälle
Ein Blogartikel stapelt auf Mobilgeräten Text, CTA und verwandte Artikel. Eine Sidebar kommt erst bei genug Breite dazu. Affiliate- oder Produktkarten sollten Container Queries nutzen, damit sie im Artikel, in der Sidebar und im Related-Block gleich stabil bleiben.
Eine SaaS-Preisseite verwendet dieselbe Preiskarte auf Homepage, Landingpage und Checkout. Reines Viewport-CSS kann in einer schmalen Spalte fälschlich ein breites Layout auslösen.
Ein Admin-Dashboard braucht Platz für Filter, Tabellen, Export und Suche. Auf kleinen Screens werden Tabellen zu Karten, auf großen bleiben Spalten. prefers-reduced-motion reduziert unnötige Bewegung bei langer Nutzung.
Monetarisierte Inhalte brauchen sichtbare CTA, ohne die Lektüre zu zerstören. Media Queries steuern den Seitenrhythmus, Container Queries das Innenleben der CTA-Karten.
Kopierbares HTML/CSS
Speichere den Code als responsive-demo.html und öffne ihn im Browser. Er enthält mobile-first CSS, Container Queries, Dark Mode, reduzierte Bewegung und clamp() für Typografie. Verwende nicht nur font-size: 4vw; das wird auf extremen Breiten schnell unlesbar.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Responsive media query demo</title>
<style>
:root { color-scheme: light dark; --bg: #f7f8fb; --surface: #ffffff; --text: #1f2937; --line: #d8dee8; --accent: #0f766e; --accent-strong: #115e59; --shadow: 0 12px 30px rgb(15 23 42 / 0.12); }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1rem, 0.94rem + 0.25vw, 1.125rem); line-height: 1.7; color: var(--text); background: var(--bg); }
a { color: var(--accent-strong); }
.site-header { padding: 1rem; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
.nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; max-width: 72rem; margin: 0 auto; }
.brand { font-weight: 800; }
.nav-links { display: flex; gap: 0.75rem; padding: 0; margin: 0; list-style: none; }
.page { width: min(100% - 2rem, 72rem); margin: 2rem auto; display: grid; gap: 1.5rem; }
.hero, .article, .sidebar-card, .offer { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.hero { padding: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); }
h1 { margin: 0 0 0.75rem; font-size: clamp(2rem, 1.65rem + 1.6vw, 3.2rem); line-height: 1.15; }
.layout { display: grid; gap: 1.5rem; }
.article, .sidebar-card { padding: 1rem; }
.sidebar { display: grid; gap: 1rem; align-content: start; }
.offer-wrap { container-type: inline-size; container-name: offer; }
.offer { display: grid; gap: 1rem; padding: 1rem; overflow: hidden; }
.offer-media { min-height: 10rem; border-radius: 6px; background: linear-gradient(135deg, rgb(15 118 110 / 0.85), rgb(37 99 235 / 0.75)), repeating-linear-gradient(45deg, rgb(255 255 255 / 0.18) 0 10px, transparent 10px 20px); }
.button { display: inline-flex; width: fit-content; min-height: 2.75rem; align-items: center; justify-content: center; padding: 0.7rem 1rem; border-radius: 6px; background: var(--accent); color: white; font-weight: 700; text-decoration: none; transition: transform 180ms ease, background-color 180ms ease; }
.button:hover { transform: translateY(-2px); background: var(--accent-strong); }
@media (width >= 48rem) { .article { padding: 1.5rem; } .layout { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } }
@media (width >= 72rem) { .layout { grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.8fr); } }
@container offer (width >= 34rem) { .offer { grid-template-columns: 14rem minmax(0, 1fr); align-items: center; padding: 1.25rem; } }
@media (prefers-color-scheme: dark) { :root { --bg: #10151f; --surface: #18202d; --text: #eef2f7; --line: #334155; --accent: #2dd4bf; --accent-strong: #5eead4; --shadow: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
</style>
</head>
<body>
<header class="site-header"><nav class="nav" aria-label="Main navigation"><div class="brand">ClaudeCodeLab</div><ul class="nav-links"><li><a href="#guide">Guide</a></li><li><a href="#offer">Template</a></li></ul></nav></header>
<main class="page"><section class="hero"><h1>Media queries that survive real layouts</h1><p>Mobile-first CSS, Container-Karten, Dark Mode und reduced motion.</p></section><div class="layout" id="guide"><article class="article"><h2>Readable article body</h2><p>The article stays readable on phones and gains a sidebar only when there is enough room.</p><div class="offer-wrap" id="offer"><section class="offer"><div class="offer-media" aria-hidden="true"></div><div><h2>Responsive review checklist</h2><p>Use this area for a download, newsletter or product CTA.</p><a class="button" href="#">Get the checklist</a></div></section></div></article><aside class="sidebar" aria-label="Related content"><section class="sidebar-card"><h2>Related</h2><p>Grid, Flexbox, accessibility and performance belong in the same review.</p></section></aside></div></main>
</body>
</html>
Claude Code Prompts
Ziel: Responsive CSS für die Artikelseite
Regeln:
- Mobile-first Basis
- Viewport Media Queries nur für das globale Layout
- Container Queries für wiederverwendbare Karten und CTA
- Kein font-size nur mit vw; clamp() verwenden
- prefers-color-scheme und prefers-reduced-motion respektieren
Prüfung:
- 375, 768, 1024 und 1440 px testen
- Dark Mode und reduced motion mit Playwright testen
- Doppelte oder unnötige Breakpoints melden
Reviewe diesen Diff als responsive CSS.
Priorität: horizontaler Overflow, unlesbare Schrift, gequetschte CTA/Ads,
fehlendes container-type, reduced-motion-Verstöße und zu viele Breakpoints.
Gib nur konkrete Zeilen und minimale Fixes zurück.
Playwright-Test
import { test, expect } from "@playwright/test";
const fileUrl = "file:///absolute/path/to/responsive-demo.html";
for (const width of [375, 768, 1024, 1440]) {
test(`no horizontal overflow at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
await page.goto(fileUrl);
const hasOverflow = await page.evaluate(() => document.documentElement.scrollWidth > document.documentElement.clientWidth);
await expect(hasOverflow).toBe(false);
await expect(page.locator(".offer")).toBeVisible();
});
}
test("dark mode keeps text readable", async ({ page }) => {
await page.emulateMedia({ colorScheme: "dark" });
await page.goto(fileUrl);
await expect(page.locator("body")).toHaveCSS("color", "rgb(238, 242, 247)");
});
test("reduced motion disables hover timing", async ({ page }) => {
await page.emulateMedia({ reducedMotion: "reduce" });
await page.goto(fileUrl);
const duration = await page.locator(".button").evaluate((el) => getComputedStyle(el).transitionDuration);
expect(duration).toBe("0.01ms");
});
flowchart TD
A["Mobile-first CSS"] --> B["Media Queries für Layout"]
B --> C["Container Queries für Karten"]
C --> D["Nutzerpräferenzen"]
D --> E["Playwright Screenshots und Overflow"]
E --> F["Claude Code Review Prompt"]
Fehler und Monetarisierung
Vermeide gestapelte max-width-Overrides, viewportbasierte Logik für wiederverwendbare Karten, reine vw-Schriftgrößen und ignorierte reduced-motion-Einstellungen. Nach Claude Codes CSS-Generierung müssen echte Texte, Übersetzungen, Anzeigen, Dark Mode und schmale Breiten geprüft werden.
Responsive CSS schützt Umsatz, weil Angebote sichtbar bleiben, ohne die Lektüre zu beschädigen. Nutze einen ruhigen CTA in der Artikelmitte für eine kostenlose Checkliste und einen stärkeren CTA am Ende für Templates oder Beratung. Starte mit dem kostenlosen Material, sieh dir Produkte an oder plane Team-Einführung über Training.
Im Praxistest von Masa brachte die Umstellung der CTA-Karte auf Container Queries den größten Effekt. Dieselbe Karte funktionierte im Artikel, in der Sidebar und im Related-Bereich ohne zusätzlichen Viewport-Breakpoint. Playwright bestätigte keinen Overflow bei 375px, lesbaren Dark Mode und reduzierte Hover-Bewegung.
Kostenloses PDF: Claude-Code-Cheatsheet
E-Mail eintragen und eine Seite mit Befehlen, Review-Gewohnheiten und sicheren Workflows herunterladen.
Wir schützen Ihre Daten und senden keinen Spam.
Über den Autor
Masa
Engineer für praktische Claude-Code-Workflows und Team-Einführung.
Ähnliche Artikel
Claude Code Permission Safety Ladder: Zugriff kontrolliert erweitern
Von read-only zu begrenzten Änderungen, Prüfbefehlen und Deploy-Checks mit klarer Kontrolle.
Claude Code Small PR Proof Pack: kleine Änderungen reviewbar machen
Ein Proof Pack für Claude-Code-PRs: Diff, Checks, öffentliche URL, CTA-Pfad und Rollback.
Claude-Code-Review-Gate vor dem Commit
Vor dem Commit mit Claude Code prüfen: Diff, Build, öffentliche URL, Gumroad-Links, Beratung-CTA, fehlende Tests und fremde Dateien.