Responsives Webdesign | Gulp.js-Website-Tutorial

Einführung

In diesem Projekt lernst du, wie du ein responsives Layout für eine Website implementierst, ähnlich der offiziellen Gulp.js-Website. Du wirst Medienabfragen verwenden, um das Layout und die Stile der Webseite basierend auf der Bildschirmgröße anzupassen.

👀 Vorschau

responsive layout preview

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du Medienabfrage-Regeln zur HTML-Datei hinzufügen, um ein responsives Layout zu erstellen
Wie du die Breite und Sichtbarkeit von Seitelementen basierend auf verschiedenen Bildschirmgrößen anpasst
Wie du das responsive Layout durch Verändern der Browserfenstergröße testest

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Ein responsives Web Design mit Hilfe von Medienabfragen zu implementieren
Layout und Stile basierend auf der Bildschirmgröße anzupassen
Webseiten effektiv für verschiedene Geräte und Bildschirmauflösungen zu testen und zu optimieren

Projekt einrichten

In diesem Schritt wirst du das Projekt einrichten und die Dateien im Editor öffnen.

Öffne den Projektordner, der die folgenden Dateien und Verzeichnisse enthält:

├── css
├── imgs
├── js
└── index.html

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

WebIDE Go Live button

Jetzt kannst du die statische Seite der Gulp-Website sehen, die noch nicht responsiv ist. Ändere die Fenstergröße manuell, und du wirst den folgenden Effekt sehen.

Non responsive webpage layout

Medienabfragen hinzufügen

In diesem Schritt wirst du lernen, wie du Medienabfragen zur HTML-Datei hinzufügen, um die Seite responsiv zu machen.

Öffne die Datei index.html im Codeeditor.
Finde den ersten <style>-Abschnitt im <head> des Dokuments.
Füge die folgende Medienabfrage-Regel unter /* TODO */ in <style> hinzu:

/* TODO */
@media screen and (max-width: 1400px) {
  nav.content,
  main section {
    width: 900px !important;
  }
}

@media screen and (max-width: 900px) {
  nav.content,
  main section {
    width: 700px !important;
  }
}

@media screen and (max-width: 650px) {
  main section,
  main ul li {
    width: 100% !important;
  }

  nav.content.list {
    display: none;
  }

  nav.content.menu {
    display: block;
    position: absolute;
    right: 10px;
  }

  main ul li:nth-child(even) {
    margin-left: 0 !important;
  }
}

Diese Medienabfragen werden spezifische Stile auf die Seite anwenden, basierend auf der Bildschirmbreite. Die erste Medienabfrage setzt die Breite des Inhalts und des Hauptabschnitts auf 900px, wenn die Bildschirmbreite kleiner oder gleich 1400px ist. Die zweite Medienabfrage setzt die Breite auf 700px, wenn die Bildschirmbreite kleiner oder gleich 900px ist. Die dritte Medienabfrage versteckt die Navigationsliste, zeigt ein Menüsymbol an und setzt die Breite des Hauptabschnitts und der Listenelemente auf 100%, wenn die Bildschirmbreite kleiner oder gleich 650px ist.

Responsives Layout testen

In diesem Schritt wirst du das responsive Design testen und ggf. erforderliche Verbesserungen vornehmen.

Speichere die Datei index.html.
Aktualisiere die Webseite im Browser.
Verändere die Breite des Browserfensters auf verschiedene Werte, um die Änderungen des responsiven Layouts zu sehen.
Vergewissere dich, dass das Seitenlayout den erwarteten Ergebnissen entspricht, die in den bereitgestellten Bildern gezeigt werden.

An diesem Punkt hast du die Implementierung des responsiven Layouts für die Gulp.js-Website abgeschlossen. Die Seite sollte jetzt je nach Anforderungen an verschiedene Bildschirmgrößen anpassen.

Das fertige Mobil-Ergebnis ist unten gezeigt:

Completed Effect

Herzlichen Glückwunsch! Du hast erfolgreich ein responsives Layout für die Gulp.js-Website implementiert.