Was sind die Schritte zum Erstellen eines responsiven Website-Designs mit HTML und CSS?

Dieser Artikel zeigt die Schritte zum Erstellen eines responsiven Website-Designs in HTML und CSS mit:

• Viewport-Meta-Tag
• Responsive Bilder
• Flexbox-Layout
• Gitterstruktur
• Medien-Anfragen

Wie erstelle ich ein responsives Website-Design mit HTML und CSS?

Um ein responsives Website-Design mit HTML und CSS zu erstellen, muss ein Layout erstellt werden, das sich an verschiedene Bildschirmgrößen und Auflösungen anpasst. Hier sind die Schritte, die Sie befolgen können, um ein responsives Website-Design zu erstellen:

Schritt 1: Viewport-Meta-Tag

Der ' Ansichtsfenster ”Meta-Tag spielt eine wichtige Rolle bei der Erstellung von responsivem Webdesign. Es wird in das „ ”-Tag der HTML-Datei mit folgenden Attributen:

Das obige Meta-Tag hat zwei Attribute:

• Der ' Name ”-Attribut gibt den Namen der Funktionalität an, für die dieses Tag erstellt/verwendet wird. Setzen Sie zum Beispiel „ Ansichtsfenster ' zum ' Name ”-Attribut, um mit dem Darstellungsbereich verschiedener Geräte umzugehen.
• Der ' Inhalt ”-Attribut definiert den vorherigen Attributwert. Es legt die Breite jedes Geräts fest und skaliert das Dokument/die Webseite auf 100 %.

Schritt 2: Responsive Bilder

Da die Bildgröße voneinander abweicht, ist es daher schwierig, dieselben „ Höhe ' oder ' Breite ” Eigenschaft für jedes Bild. Wenn die Größe des Bildes festgelegt ist, ändern Benutzer die Größe des Webseitenbildes nicht mit dem Bildschirm. Benutzer können das responsive Bild jedoch über den folgenden Code festlegen:

Der ' maximale Breite ” Die CSS-Eigenschaft verhindert, dass das Bild innerhalb des zugewiesenen Bereichs angezeigt wird. Durch Festlegen des Werts in „%“ ändert sich die Bildgröße zusammen mit der Größenänderung des übergeordneten Elements. Dadurch entsteht ein ansprechender Effekt für das Bild.

Schritt 3: Flexbox-Layout

Das Flexbox-Layout wird dringend empfohlen, um ein responsives Website-Design zu erstellen. Es ermöglicht, dass die HTML-Elemente an einer bestimmten Position angezeigt werden und der verfügbare Platz für jedes untergeordnete Element entsprechend der vom übergeordneten div verfügbaren Größe angepasst wird. Das Flexbox-Layout enthält mehrere Eigenschaften, die dem Entwickler viel Freiheit bieten, wie im folgenden Code:

Im obigen Code-Snippet:

• Erstellen Sie zuerst ein übergeordnetes div-Element mit der ID „ Elternteil ” innerhalb der “ ' Schild.
• Erstellen Sie als Nächstes mehrere untergeordnete div-Elemente und weisen Sie ihnen die Klasse „ Kind “.
• Wählen Sie dann „ Elternteil ” Klasse und geben Sie den Wert von “ biegen „für das CSS“ Anzeige ' Eigentum.
• Geben Sie danach einen Wert von „ 1 ' zum ' biegen „Eigentum für jeden“ Kind ”-Klasse, die das untergeordnete Element als Flex anzeigt.

Nach Ausführung des obigen Codes sieht die Webseite so aus:

Die obige Ausgabe zeigt, dass das untergeordnete Element die gleiche Breite erhält, wenn die Größe des Browsers geändert wird.

Schritt 4: Rasterlayout

Das Grid-Layout erstellt ein Grid und weist die HTML-Elemente innerhalb des Grid-Teils zu. Die Rasterelemente ändern sich relativ zur Bildschirmgröße der Webseite. Es erstellt ein ansprechendes Design, da sich die Größe des HTML-Elements entsprechend dem Gerätebildschirm ändert:

Im obigen Code:

• Erstellen Sie zuerst ein übergeordnetes div und weisen Sie ihm die Klasse „ Komponente ” innerhalb der “ ' Schild. Erstellen Sie danach drei untergeordnete div-Elemente darin.
• Weisen Sie dann in der CSS-Datei ein „ Netz ” Wert auf die “ Anzeige „Eigenschaft für die“ Container ” div.
• Erstellen Sie danach drei gleich große Portionen auf der Webseite mit dem „ Grid-Template-Spalte ” Eigenschaft und setzen Sie sie gleich “ 1fr 1fr 1fr „wobei fr bedeutet“ Fraktion “.

Nach dem Kompilieren des obigen Codes sieht die Ausgabe so aus:

Die Ausgabe zeigt, dass sich die divs entsprechend der Bildschirmgröße mit gleichen Proportionen skalieren.

Schritt 5: Medienabfragen

Die Verwendung von Medienabfragen zur Erstellung eines responsiven Designs ist eine Art altmodische Sache, aber dennoch verwenden die meisten Websites Medienabfragen. Die Medienabfragen können direkt in der CSS-Datei hinzugefügt werden, nachdem der Standardstil für das ausgewählte HTML-Element hinzugefügt wurde. Die Medienabfrage macht den Code etwas länger und unübersichtlicher. Weil der Entwickler Code für jede Bildschirmgröße separat einfügen muss.

Sehen Sie sich zum Beispiel den folgenden Codeausschnitt an:

Im obigen Codeausschnitt:

• Legen Sie zunächst die Medienabfrage fest, die CSS-Eigenschaften auf die ausgewählte Elementklasse anwendet. Komponente ” wenn die Bildschirmbreite größer wird als „ 640px “.
• Wählen Sie als Nächstes die „Komponentenklasse“ aus und legen Sie den Wert fest. Waldgrün ” für die „ Hintergrundfarbe ' Eigentum.

Dann für den obigen Codeausschnitt:

• Stellen Sie die Medienabfrage so ein, dass Stile angewendet werden, wenn die Breite kleiner als „ 1000px “.
• Wählen Sie nun „ Komponente ”-Klasse und geben Sie den Wert „ Dodgerblue ” für die „ Hintergrundfarbe ' Eigentum:

Nach der Ausführung der oben genannten Codeausschnitte sieht die Ausgabe so aus:

Die Ausgabe zeigt an, dass die Medienabfrage den Hintergrund basierend auf der Bildschirmgröße ändert. Nach demselben Muster können auch Schriftgröße, Breite, Höhe und andere CSS-Eigenschaften angewendet werden.

Die möglichen Bildschirmgrößen der Haltepunkte, die bei der Verwendung der Medienabfragen berücksichtigt werden müssen, sind:

• Für ' klein ” Bildschirmgröße, stellen Sie die Breite kleiner ein als „ 640px “.
• Für ' Mittel ” Bildschirmgröße des Ansichtsfensters, die Breite liegt zwischen „ 641px ' Und ' 1007px “.
• Für ' groß ” Bildschirmgröße, stellen Sie die Breite auf „ 1008px ' oder größer.

Abschluss

Um ein responsives Website-Design zu erstellen, müssen die Entwickler das „ Ansichtsfenster ”-Tag im „ ”Tag-Bereich. Als nächstes verwenden Sie die „ Flexbox ' Und ' Netz ' Layout. Diese Layoutmodule helfen bei der Erstellung eines responsiven Designs. Am Ende ist das „ Medien-Anfragen „Helfen Sie dem Entwickler, verschiedene Versionen derselben Website für unterschiedliche Bildschirmgrößen zu gestalten. In diesem Artikel wurden die Schritte gezeigt, mit denen ein responsives Website-Design erstellt werden kann.