Responsive Design
Responsive Webdesign sorgt dafür, dass Seiten auf Smartphone, Tablet und Desktop gleichermaßen gut funktionieren. Der Grundsatz: Mobile First – erst die mobile Variante entwerfen, dann erweitern.
Media Queries
/* Basis: mobile Layouts */
.container { display: flex; flex-direction: column; }
/* Ab 768px: Tablet/Desktop */
@media (min-width: 768px) {
.container { flex-direction: row; }
}Flexible Einheiten statt Pixel
Nutze rem/em für Schrift, %, vw/vh und clamp() für Größen. Bilder skalieren mit max-width: 100% und dem srcset-Attribut.
Viewport und Praxis
<meta name="viewport" content="width=device-width, initial-scale=1">Teste mit den DevTools (Toggle Device Toolbar) auf gängigen Größen: 360px (Handy), 768px (Tablet), 1280px+ (Desktop). Touch-Ziele sollten mindestens 44×44 px groß sein.
Weiterlesen: HTML5-Semantik · HTML & CSS Schnellreferenz · Git-Grundlagen