Lädt...

Responsives HTML

Handy, Tablet und Desktop teilen die URL. Eine responsive Seite passt sich an. HTML startet; CSS beendet.

Direkte Antwort

1) Viewport-meta in head
2) Flexible Breiten
3) img { max-width: 100%; height: auto; }
Media Queries sind CSS.

Viewport meta

html
HTML Code
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
</head>

Fluid images helper

html
HTML Code
<style>
img { max-width: 100%; height: auto; }
</style>
<img src="images/wide.jpg" alt="Wide landscape photo">

Ausprobieren

  1. Viewport-meta prüfen
  2. Breites Bild + fluid CSS
  3. Fenster schmaler
  4. Mit festem width vergleichen

Typische Fehler

  • Viewport vergessen
  • Feste 1200px
  • Nur HTML reicht

Zusammenfassung

  • Viewport meta wichtig
  • Flexible Breiten/Bilder
  • Media Queries in CSS
  • Kleinbildschirm früh

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
5
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt