Responsives Webdesign für alle Bildschirme

Einführung

In diesem Projekt lernst du, wie du ein responsives Webdesign erstellst, das sich an verschiedene Bildschirmgrößen anpasst. Ziel ist es, eine Webseite zu entwickeln, die sowohl Desktop- als auch Mobilbenutzern eine komfortable Benutzererfahrung bietet.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du das Anfangslayout für die Menü- und Inhaltsbereiche einrichtest
• Wie du das responsiv Design mit Medienabfragen implementierst
• Wie du das responsiv Design testest und verfeinern, um eine nahtlose Erfahrung sicherzustellen

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Ein responsives Webdesign zu erstellen, das sich an verschiedene Bildschirmgrößen anpasst
• Eine benutzerfreundliche mobile Schnittstelle zu entwickeln, einschließlich eines zusammenziehbaren Menüs
• Beste Praktiken für das Testen und Iterieren eines responsiven Webdesigns anzuwenden

Skills Graph

Projekt einrichten

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

Öffne das Projektverzeichnis, das die folgenden Dateien und Verzeichnisse enthält:

├── css
│   └── style.css
├── images
│   ├── 1.png
│   └── 2.png
├─── js
│    └── jQuery.min.js
└─── index.html

Darin sind:

• index.html ist die Hauptseite.
• css/style.css ist die Datei, in der die Stile ergänzt werden müssen.
• js/jQuery.min.js ist die jQuery-Bibliothekdatei.
• images ist das Bilderverzeichnis.

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

Als Nächstes öffne die "Web 8080" oben auf der VM und aktualisiere die Seite manuell, um das folgende Ergebnis in deinem Browser zu sehen:

Responsives Design implementieren

In diesem Schritt wirst du lernen, wie du das responsiv Design für die Webseite implementierst.

1. Füge die folgende CSS-Regel am Ende der css/style.css-Datei hinzu:

@media (max-width: 800px) {
  .menu {
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
  }

  .icon-menu {
    color: #a0a0a0;
    margin-left: 20px;
    display: inline-block !important;
  }

  .icon-menu:hover {
    color: white;
    cursor: pointer;
  }

  .collapse {
    display: none;
  }

  input[type="checkbox"]:checked ~ .collapse {
    display: flex;
    flex-direction: column;
    background-color: #252525;
  }

  .dropdown:hover ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .box {
    margin-bottom: 15px;
  }

  #tutorials img {
    margin: 0;
  }
}

Dieser CSS-Code setzt das responsiv Design für die Webseite ein. Er umfasst Stile für das mobile Layout, einschließlich der Menüschaltfläche, des erweiterten Menüs und des Inhaltslayouts.

Die wichtigsten Änderungen sind:

• Die Menühöhe und die Zeilenhöhe werden auf 54px gesetzt, um dem mobilen Design zu entsprechen.
• Die Menüschaltfläche (.icon-menu) wird angezeigt und gestaltet.
• Die .collapse-Klasse wird verwendet, um die Menüpunkte standardmäßig zu verstecken und anzuzeigen, wenn die Menüschaltfläche angeklickt wird.
• Die .row- und .box-Stile werden aktualisiert, um den Inhalt im mobilen Layout in einem einzelnen Spaltenlayout anzuzeigen.
• Der #tutorials img-Rand wird entfernt, um das mobile Layout zu passen.

2. Speichere die css/style.css-Datei und aktualisiere die Webseite. Du solltest jetzt das responsiv Design in Aktion sehen, wobei das mobile Layout angezeigt wird, wenn die Bildschirmbreite weniger als 800px beträgt.

Responsives Design testen und verfeinern

In diesem Schritt wirst du das responsiv Design testen und die erforderlichen Verbesserungen vornehmen.

1. Öffne die Webseite in deinem Browser und verändere die Fenstergröße auf verschiedene Breiten, um sicherzustellen, dass das Layout richtig angepasst wird.
2. Teste die Funktionalität der Menüschaltfläche im mobilen Layout, und sicherstelle, dass die Menüpunkte angezeigt werden, wenn die Schaltfläche angeklickt wird.
3. Überprüfe das Inhaltslayout sowohl in der Desktop- als auch in der mobilen Ansicht, und sicherstelle, dass die Bilder, der Text und der Abstand gut aussehen.
4. Wenn du Probleme oder Verbesserungsmöglichkeiten findest, aktualisiere die CSS in der css/style.css-Datei und aktualisiere die Seite, um die Änderungen zu sehen.

Denke daran, dass das responsiv Webdesign ein iterativer Prozess ist, also fürchte dich nicht davor, zu experimentieren und das Design zu verfeinern, bis du mit den Ergebnissen zufrieden bist.

Das fertige mobile Ergebnis ist unten gezeigt:

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.