Lädt...

HTML Responsive

Nach dem Layout kommt Responsive: dieselbe URL auf Phone und Desktop. HTML startet mit Viewport; CSS vollendet.

Eine URL, viele Breiten

Kein separates Mobile-HTML pro Seite. 1200px-Gewohnheiten erzeugen Quer-Scroll.

Direkte Antwort

1) Viewport-Meta. 2) Fluide Breiten. 3) img max-width:100%. Media Queries sind CSS-Thema.

📊 HTML unlocks vs CSS responsive tools

Layer	Job for responsiveness	Examples
HTML viewport	Tell mobile browsers how to size the layout viewport	meta name="viewport" with width=device-width
HTML structure	Keep landmarks and flexible wrappers that can reflow	header, main, aside, div.row (from layout)
CSS fluid sizing	Let boxes and images shrink instead of overflow	max-width, %, height: auto
CSS adaptation	Change columns and spacing at breakpoints	media queries, flex/grid tweaks (CSS courses)
Avoid	Huge fixed pixels and layout tables fighting narrow screens	width="1200", whole-page table chrome

Viewport-Meta — das essenzielle HTML-Stück

Ohne Viewport schrumpfen viele Phones eine Desktop-Leinwand — Text wirkt winzig.

Viewport meta in head

html

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

Viewport-Zeile lesen

name=viewport ist der Schalter
width=device-width = Gerätebreite
initial-scale=1.0 = 100%
CSS bleibt nötig

Fluide Bilder — HTML-Markup plus CSS-Skalierung

img mit alt; Skalierung per CSS.

Fluid images helper

html

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

Fluide Regel lesen

max-width:100%
height:auto hälts Verhältnis
width=1200 überläuft auf Phones

HTML öffnet; CSS vollendet

Viewport und flexible Struktur sind HTML. Fluide Spalten und Breakpoints sind CSS.

Übung — Resize-Labor

Viewport ergänzen
Breites Bild + fluides CSS
Fenster verengen
Kurz width=1200 testen

Typische Fehler

Viewport vergessen
fixe 1200px-Medien
nur HTML reicht Mythos
Layout-Tabellen

Kurzfassung

Viewport ist essenziell
fluide Bilder helfen
HTML + CSS
als Nächstes: Formulare

🧠 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

❓

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