HTML - Responsives Webdesign
Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt des responsiven Webdesigns ein. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also hole dir dein Lieblingsgetränk, setze dich bequem hin und lassen wir gemeinsam dieses Abenteuer starten!
Was ist responsives Webdesign?
Bevor wir uns dem "wie" zuwenden, lassen wir uns das "was" und "warum" des responsiven Webdesigns klarmachen. Stell dir vor, du liest ein Buch, das seine Textgröße zauberhaft anpasst, je nachdem, ob du es dicht an dein Gesicht hältst oder in Armweite. quite cool, oder? Das ist im Grunde genommen, was responsives Webdesign für Websites macht!
Responsives Webdesign ist ein Ansatz, der sicherstellt, dass Webseiten auf einer Vielzahl von Geräten und Bildschirmgrößen gut dargestellt werden. Vom Desktop-Bildschirm über Tablets bis hin zu Handys stellt ein responsives Design sicher, dass deine Website überall gut aussieht und ordnungsgemäß funktioniert.
Wie erstellt man responsive Webseiten?
Nun, da wir wissen, was responsives Design ist, lassen uns die Ärmel hochwerren und lernen, wie man responsive Webseiten erstellt. Es gibt mehrere Techniken, die wir verwenden können, aber wir werden uns auf die am häufigsten und effektivsten konzentrieren.
1. Flüssige Gitter
Flüssige Gitter verwenden relative Einheiten wie Prozente anstelle von absoluten Einheiten wie Pixel. Dies ermöglicht es dem Layout, sich basierend auf der Bildschirmgröße anzupassen.
Hier ist ein einfaches Beispiel:
<div class="container">
<div class="column">Spalte 1</div>
<div class="column">Spalte 2</div>
<div class="column">Spalte 3</div>
</div>.container {
width: 100%;
}
.column {
float: left;
width: 33.33%;
}In diesem Beispiel nimmt jede Spalte immer ein Drittel der Breite des Behälters ein, unabhängig von der Bildschirmgröße.
2. Flexible Bilder
Bilder können responsive gemacht werden, indem ihre maximale Breite auf 100% des umgebenden Elements gesetzt wird.
img {
max-width: 100%;
height: auto;
}Diese CSS-Regel stellt sicher, dass Bilder skaliert werden, wenn ihr Behälter kleiner als die ursprüngliche Größe des Bildes wird, aber nicht größer als ihre ursprüngliche Größe werden.
3. Media Queries
Media Queries ermöglichen es dir, verschiedene Stile für verschiedene Bildschirmgrößen anzuwenden. Sie sind wie bedingte Anweisungen für dein CSS.
/* Stile für Bildschirme kleiner als 600px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}Diese Media Query ändert das Layout in eine einzelne Spalte, wenn die Bildschirmbreite 600px oder weniger beträgt.
Einstellen des Viewports für responsives Design
Nun lassen wir uns über ein wesentliches Element für responsives Design unterhalten: den Viewport. Der Viewport ist der sichtbare Bereich einer Webseite für den Benutzer. Er variiert je nach Gerät - er ist auf einem Handy kleiner als auf einem Computerbildschirm.
Um den Viewport einzustellen, verwenden wir das <meta>-Tag im <head>-Bereich unseres HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Diese Zeile weist den Browser an, die Breite des Viewports auf die Gerätebreite einzustellen und den Anfangszoom auf 1.0 (kein Zoom) zu setzen.
HTML viewport tag Attributes
Das Viewport Meta-Tag verfügt über mehrere Attribute, die es uns ermöglichen, die Anzeige unserer Seite zu steuern. Sehen wir uns diese in einer Tabellenform an:
| Attribut | Wert | Beschreibung |
|---|---|---|
| width | device-width oder ein spezifischer Wert | Setzt die Breite des Viewports |
| height | device-height oder ein spezifischer Wert | Setzt die Höhe des Viewports |
| initial-scale | Eine Zahl zwischen 0.0 und 10.0 | Setzt die Anfangsvergrößerung |
| user-scalable | yes oder no | Ermöglicht oder verbietet Vergrößerungs- und Verkleinerungsaktionen |
| minimum-scale | Eine Zahl zwischen 0.0 und 10.0 | Setzt die minimale Vergrößerung |
| maximum-scale | Eine Zahl zwischen 0.0 und 10.0 | Setzt die maximale Vergrößerung |
Zum Beispiel, wenn du eine spezifische Breite einstellen und verhindern möchtest, dass Benutzer zoomen, könntest du verwenden:
<meta name="viewport" content="width=500, user-scalable=no">Denke daran, es ist generell besser, Benutzern das Zoomen aus Accessibility-Gründen zu ermöglichen!
Beispiele für responsive Webseiten
Nun, da wir die Grundlagen abgedeckt haben, schauen wir uns ein umfassenderes Beispiel für eine responsive Webseite an:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Webdesign Beispiel</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
.content {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1;
padding: 20px;
min-width: 200px;
}
@media screen and (max-width: 600px) {
.column {
flex: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Willkommen auf meiner responsiven Webseite</h1>
</div>
<div class="content">
<div class="column">
<h2>Spalte 1</h2>
<p>Dies ist einige Inhalte für die erste Spalte.</p>
</div>
<div class="column">
<h2>Spalte 2</h2>
<p>Dies ist einige Inhalte für die zweite Spalte.</p>
</div>
<div class="column">
<h2>Spalte 3</h2>
<p>Dies ist einige Inhalte für die dritte Spalte.</p>
</div>
</div>
</div>
</body>
</html>In diesem Beispiel haben wir eine einfache Webseite mit einer Kopfzeile und drei Spalten erstellt. Die Spalten werden nebeneinander auf größeren Bildschirmen angezeigt, aber stapeln sich vertikal auf Bildschirmen, die kleiner als 600px breit sind.
Und das war's, Leute! Du hast gerade deine ersten Schritte in die Welt des responsiven Webdesigns gewagt. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Techniken zu experimentieren. Bevor du es weißt, wirst du wunderschöne, responsive Websites erstellen, die auf jedem Gerät toll aussehen!
Beim Abschied wird mir an eine Schülerin erinnerter, die ich einmal hatte und die von responsivem Design恐怖 haben. Sie dachte, es sei eine Art dunkle Magie. Aber nach ein paar Lektionen und viel Übung hat sie ein responsives Portfolio erstellt, das ihr einen tollen Job bescherte! Also bleib dran und wer weiß, wohin deine neuen Fähigkeiten dich führen werden?
Happy Coding, alle zusammen! ?
Credits: Image by storyset