HTML Teil 21 HTML Responsive Webseiten

Responsive Webseiten sind Webseiten, die für verschiedene Anzeigegeräte optimiert werden. Für einen Computer, für ein Smartphone, Für ein Tablet und für normale Telefone.
Alle diese Geräte verwenden verschiedene Bildschirm- Auflösungen und somit muss man für jedes Gerät ein eigenes Layout erstellen, bzw das Layout so erstellen, dass sich dieses automatisch an alle Größen anpassen kann.

Einfaches Beispiel:
Hier werden die DIV Container auf eine Größe von 300px mal 300px eingestellt. Der Browser zeigt so viele DIV Container nebeneinander an, wie möglich. Reicht der Platz nicht mehr, so wird da nächste nach unten Verschoben.

<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

.container1 {
    float: left;
    background-color: #F2F2F2;
    margin: 3px;
    padding: 10px;
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
</style>
<meta charset="UTF-8">
</head>
<body>

<h1>Responsive Webseite</h1>

<div class="container1">
  <h2>Sri Lanka</h2>
  <p>Durch ihre Lage bildete die Insel von der Antike bis zur Moderne einen strategischen Knotenpunkt für die Seefahrt zwischen Vorder- und Südostasien.</p>
</div>

<div class="container1">
  <h2>Indischer Ozean</h2>
  <p>Der bis zu 8047 Meter tiefe Indische Ozean (kurz, aber selten benutzt Indik, aus lateinisch oceanus indicus, </p>
</div>

<div class="container1">
  <h2>Golf von Oman</h2>
  <p>Die Meeresbucht ist ungefähr 450 km tief und weist eine Breite von 330 km auf</p>
  <p>Der Golf von Oman wird im Norden vom Iran und Pakistan, im Westen von den Vereinigten Arabischen Emiraten und im Süden von Oman begrenzt.</p>
</div>

<div class="container1">
  <h2>Persischer Golf</h2>
  <p>Der Persische Golf ist ein relativ flaches Gewässer mit einer größten Tiefe von ca. 100 m. Sein Volumen beträgt ca. 6000 km³.</p>
  <p>Über die Straße von Hormus ist er mit dem Golf von Oman und dem Arabischen Meer bzw. dem Indischen Ozean verbunden. </p>
</div>

</body>
</html>

Damit ein Mobiles Gerät die Webseite als Responsive Webseite öffnet, benötigt man im <head> die Zeile:

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

Damit öffnet der Gerät die Webseite in seiner eigenen Auflösung.

Die Auflösung vom Gerätedisplay (z.B 2560×1440 Pixel) hat nichts damit zu tun, wie es im Browser dargestellt wird. (Nicht zu vergleichen mit ein Computer)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*