EMZETT.
Login

Emzett Wiki

HTML + CSS: Responsive Webdesign

Properties1
tagsprogrammiersprachen, html-css

5 Min. Lesezeit

Kurz: Webseiten werden auf Handys, Tablets, Laptops und riesigen Monitoren angezeigt. Responsives Design bedeutet: Eine Seite passt sich an jede Bildschirmgröße an. Dazu gehören vier Bausteine.

Teil des Kurses HTML + CSS

Kapitel 21 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Webseiten werden auf Handys, Tablets, Laptops und riesigen Monitoren angezeigt. Responsives Design bedeutet: Eine Seite passt sich an jede Bildschirmgröße an. Dazu gehören vier Bausteine.

1. Viewport-Meta

Ohne diese Zeile im <head> zeigen Handys die Seite als verkleinerte Desktop-Ansicht:

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

2. Flexible Einheiten und Bilder

  • Breiten in %, fr, rem oder mit max-width statt fester Pixel
  • Bilder: max-width: 100%; height: auto;
  • Schrift mit rem und clamp()
<style>
  .seite { max-width: 700px; margin: auto; padding: 0 1rem; }
  img, svg.bild { max-width: 100%; height: auto; display: block; }
  h1 { font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
</style>
<div class="seite">
  <h1>Passt sich an</h1>
  <svg class="bild" width="800" height="200" viewBox="0 0 800 200"><rect width="800" height="200" fill="#a5b4fc"/><text x="400" y="110" text-anchor="middle" font-size="40" fill="#1e1b4b">800 × 200 Bild</text></svg>
  <p>Das Bild ist 800 Pixel breit, schrumpft aber mit dem Container.</p>
</div>

3. Media Queries

Mit @media gelten Regeln nur unter bestimmten Bedingungen:

<style>
  .box { padding: 16px; color: white; background: #dc2626; }
  .box::after { content: " (klein: unter 500px)"; }
 
  @media (min-width: 500px) {
    .box { background: #16a34a; }
    .box::after { content: " (mittel: ab 500px)"; }
  }
  @media (min-width: 800px) {
    .box { background: #2563eb; }
    .box::after { content: " (groß: ab 800px)"; }
  }
</style>
<div class="box">Ändere die Breite des Ergebnisfensters:</div>

Mobile First

Schreibe zuerst das Design für kleine Bildschirme und erweitere es mit min-width für größere. Das ist einfacher, schneller auf Handys und wartbarer.

Übliche Breakpoints (richte sie nach deinem Inhalt, nicht nach Geräten):

BreakpointTypisch für
bis 600pxHandy
ab 600pxTablet hochkant
ab 900pxTablet quer / kleiner Laptop
ab 1200pxDesktop

Weitere Bedingungen

@media (max-width: 600px) { ... }               /* höchstens 600px breit */
@media (min-width: 600px) and (max-width: 900px) { ... }
@media (orientation: landscape) { ... }         /* Querformat */
@media (hover: hover) { ... }                   /* Gerät kann "hovern" (Maus) */
@media (pointer: coarse) { ... }                /* Touch: größere Ziele */
@media (prefers-color-scheme: dark) { ... }     /* Dunkelmodus des Systems */
@media (prefers-reduced-motion: reduce) { ... } /* weniger Animation gewünscht */
@media (prefers-contrast: more) { ... }         /* höherer Kontrast */
@media print { ... }                            /* beim Drucken */

Dunkelmodus:

<style>
  :root { --bg: #ffffff; --text: #111827; --akzent: #2563eb; }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #0f172a; --text: #e5e7eb; --akzent: #60a5fa; }
  }
  body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; padding: 1rem; }
  a { color: var(--akzent); }
</style>
<h2>Hell oder dunkel</h2>
<p>Die Seite folgt der Einstellung deines Systems. <a href="#">Ein Link</a></p>

Ein Drucklayout versteckt Navigation und Werbung:

@media print {
  nav, .werbung, button { display: none; }
  body { font: 12pt/1.4 Georgia, serif; color: black; background: white; }
  a::after { content: " (" attr(href) ")"; }
}

4. Flexible Layouts

Flexbox und Grid erledigen vieles ohne Media Queries:

<style>
  .karten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  .karten div { background: #fde68a; padding: 20px; border-radius: 8px; }
</style>
<div class="karten"><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div>

Typisches Muster: Menü wird zum Burger

<style>
  nav { background: #1e293b; }
  nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  nav a { display: block; padding: 12px 16px; color: white; text-decoration: none; }
  nav a:hover { background: #334155; }
  @media (min-width: 600px) {
    nav ul { flex-direction: row; }
  }
</style>
<nav aria-label="Beispiel"><ul><li><a href="#">Start</a></li><li><a href="#">Kurse</a></li><li><a href="#">Kontakt</a></li></ul></nav>
<p>Unter 600px: untereinander, darüber nebeneinander.</p>

Container Queries

Media Queries reagieren auf das Fenster. Container Queries reagieren auf die Größe des Elternelements, ideal für wiederverwendbare Komponenten:

<style>
  .platz { container-type: inline-size; border: 2px dashed #94a3b8; padding: 8px; resize: horizontal; overflow: auto; width: 380px; max-width: 100%; }
  .produkt { display: grid; gap: 8px; background: #e0f2fe; padding: 10px; }
  @container (min-width: 320px) {
    .produkt { grid-template-columns: 80px 1fr; background: #dcfce7; }
  }
</style>
<div class="platz">
  <div class="produkt"><div style="background:#0ea5e9;height:60px"></div><div>Produkt: breit genug, daher zweispaltig (ziehe die untere rechte Ecke zum Verkleinern)</div></div>
</div>

Touch-Bedienung

  • Klickziele mindestens 44 × 44 px groß, mit Abstand
  • hover nicht als einzigen Weg zu Inhalten (Handys haben kein Hover)
  • Auf Formularfelder passende types und inputmode setzen
  • <meta name="viewport"> nie mit user-scalable=no einschränken (Zoom muss möglich bleiben)

Testen

  1. Browser-Entwicklerwerkzeuge (F12), dann Geräte-Symbol: Größen und Geräte simulieren
  2. Fenster verkleinern; Zoom auf 200 %
  3. Auf echten Handys testen
  4. Hoch- und Querformat prüfen

Merke

  • Viewport-Meta, flexible Einheiten und max-width: 100% für Bilder
  • Mobile First: Basis für klein, @media (min-width: ...) für groß
  • Breakpoints nach dem Inhalt setzen, nicht nach Geräten
  • Grid mit auto-fit/minmax und Flexbox mit wrap reduzieren Media Queries
  • prefers-color-scheme und prefers-reduced-motion respektieren
  • Container Queries passen Komponenten an ihren Platz an

Übungsaufgabe

Mache eine Seite mit Kopf, Karten und Fuß responsiv: einspaltig auf dem Handy, mehrspaltig am Desktop, mit Dunkelmodus.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Layout mit CSS Grid

Weiter: CSS-Variablen und Funktionen

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks