HTML Responsive Web Design

Bei Responsive Web Design geht es darum, Webseiten zu erstellen, die auf allen Geräten gut aussehen!

Ein ansprechendes Webdesign passt sich automatisch an verschiedene Bildschirmgrößen und Ansichtsfenster an.

Was ist Responsive Web Design?

Bei Responsive Web Design geht es darum, mithilfe von HTML und CSS die Größe einer Website automatisch zu ändern, auszublenden, zu verkleinern oder zu vergrößern, damit sie auf allen Geräten (Desktops, Tablets und Telefone) gut aussieht:

Versuchen Sie, die Größe dieser Seite zu ändern!

Einstellen des Ansichtsfensters

Fügen Sie allen Ihren Webseiten das folgende <meta> -Tag hinzu (Zwischen dem <Head≫ meta.... </head> Tag), um eine reaktionsfähige Website zu erstellen:

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

Dadurch wird das Ansichtsfenster Ihrer Seite festgelegt, das dem Browser Anweisungen zur Steuerung der Abmessungen und Skalierung der Seite gibt.

Responsive Bilder

Responsive Bilder sind Bilder, die sich gut an jede Browsergröße anpassen lassen.

Verwenden der width-Eigenschaft

Wenn die Eigenschaft CSS width auf 100% festgelegt ist, reagiert das Bild und skaliert nach oben und unten:

Beispiel:
<img src="img_girl.jpg" style="width:100%;">

Verwenden der Eigenschaft max-width

Wenn die Eigenschaft max-width auf 100% festgelegt ist, wird das Bild bei Bedarf verkleinert, jedoch niemals so vergrößert, dass es größer als die ursprüngliche Größe ist:

Beispiel:
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Responsive Textgröße

Die Textgröße kann mit einer "vw" -Einheit eingestellt werden, dh der "viewport width".

Auf diese Weise folgt die Textgröße der Größe des Browserfensters:

Beispiel.
<h1 style="font-size:10vw">Hello World</h1>