Grundlagen des responsiven HTML
Responsives Design sorgt dafür, dass deine Website auf verschiedenen Geräten gut aussieht – z. B. auf Mobiltelefonen, Tablets oder Desktops. Dafür sind flexible Größen und Layouts erforderlich.
Viewport-Meta-Tag
Das Viewport-Meta-Tag ist grundlegend für responsives Design. Ohne dieses Tag verwenden Browser möglicherweise eine feste Layoutbreite, was die Darstellung auf Mobilgeräten verzerren kann.
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Breiten auf Prozentbasis
Verwende anstelle fester Pixel Prozentwerte für Breiten. Dadurch passen sich Elemente an den Elternelemente und Bildschirmgrößen an.
html
<div style="width: 80%;">This box is 80% of its parent</div>Flexible Bilder
Um zu verhindern, dass Bilder ihren Container überlaufen, setze max-width auf 100 % und height auf auto. So skaliert das Bild automatisch passend.
html
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Ein responsives Layout erstellen
Nutze CSS Flexbox oder Grid, um Spalten zu erstellen, die sich bei kleineren Bildschirmen neu anordnen oder umbrechen. Flex-wrap hilft dabei, Überläufe zu vermeiden.
html
<div style="display: flex; flex-wrap: wrap;">
<div style="flex: 1 1 300px;">Left</div>
<div style="flex: 1 1 300px;">Right</div>
</div>Einfache vollständig responsive Seite
Dieses Beispiel zeigt eine grundlegende HTML-Seite, die sich an verschiedene Bildschirmgrößen anpasst. Bilder und Container skalieren automatisch.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 100%;
max-width: 800px;
margin: auto;
padding: 20px;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Layout</h1>
<p>This layout adapts to screen size.</p>
<img src="https://via.placeholder.com/600x300" alt="Example">
</div>
</body>
</html>Häufige Fehler
Verwende keine festen Größen (z. B. width="600"), da diese sich nicht anpassen. Nutze stattdessen flexible Einstellungen wie max-width und height: auto.
html
<!-- Bad: fixed size -->
<img src="image.jpg" width="600" height="300">
<!-- Good: responsive -->
<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Verwendung von Media Queries
Media Queries ermöglichen es, verschiedene Stile für bestimmte Bildschirmgrößen zu definieren. Das ist besonders nützlich für mobile und Desktop-Layouts.
html
<style>
body {
background-color: white;
}
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
</style>Praktische Tipps
Vermeide feste Breiten, verwende immer das Viewport-Meta-Tag und teste deine Seite auf verschiedenen Geräten. Du kannst dafür die Entwicklertools im Browser nutzen.
Sprache wählen
Thema wählen
© 2025 ReadyTools. Alle Rechte vorbehalten.