⚡Design

Responsive Design richtig machen

Deine App sieht auf jedem Geraet gut aus

Ueber 60% der Nutzer kommen ueber Handy. Wenn deine App auf Mobile nicht funktioniert, verlierst du die Mehrheit deiner Besucher.

Pro-Tip — Der schnelle Weg
Bau immer Mobile First -- starte mit dem kleinsten Bildschirm und erweitere nach oben mit md: und lg: Prefixen.
Seite 1
1

Mobile First denken

Schreibe deine Styles fuer Mobile zuerst. Tailwind-Klassen ohne Prefix gelten fuer alle Groessen.

<div className="text-sm md:text-base lg:text-lg">Responsive Text</div>
2

Flexible Grids nutzen

Nutze CSS Grid mit unterschiedlichen Spalten pro Breakpoint.

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
3

Bilder responsive machen

Bilder sollten sich automatisch anpassen.

<img className="w-full h-auto object-cover" src="..." alt="..." />
4

Navigation anpassen

Auf Mobile ein Hamburger-Menu, auf Desktop eine normale Navigation.

<nav className="hidden md:flex">Desktop Nav</nav>
<button className="md:hidden">Menu</button>
5

Testen

Oeffne Chrome DevTools (F12), klick auf das Handy-Icon und teste verschiedene Geraete.

Seite 2
Warum das funktioniert
  • Mobile First stellt sicher, dass die wichtigste Zielgruppe abgedeckt ist.
  • Tailwinds Breakpoint-System macht Responsive Design trivial.
  • Claude Code kann bestehende Seiten automatisch responsive machen.
Tipps
  • Tailwind Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px).
  • Vermeide feste Pixelwerte -- nutze Prozent, rem oder Tailwinds Spacing-System.
  • Teste immer auf echten Geraeten, nicht nur im Browser.
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen