Was „Mobile-First“ bedeutet

Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 6 von 35.

Mobile-first ist eine Designstrategie, bei der du deine Website zuerst für mobile Geräte entwickelst und sie dann schrittweise für größere Bildschirme optimierst.
Die Grundidee ist, dass die meisten Nutzer inzwischen auf ihren Handys im Web surfen. Wenn du also klein anfängst, stellst du sicher, dass deine Website für die Mehrheit der Besucher gut funktioniert.

Beginne mit dem Schreiben von Stilen für Mobilgeräte:

body {
  font-size: 16px;
  padding: 10px;
}

Verwende dann Media Queries, um dein Design an größere Bildschirme anzupassen:

/* Stile für Geräte breiter als 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Dieser Ansatz stellt sicher, dass Ihre Website zuerst auf kleinen Bildschirmen gut funktioniert und verbessert dann das Erlebnis für Benutzer auf größeren Geräten.

Aufgabe

Einfach

Du erhältst HTML mit einem einfachen Navigationsmenü. Deine Aufgabe ist es, es mithilfe des Mobile-First-Ansatzes zu gestalten.

1. Zuerst die mobilen Stile

Lass jedes Menüelement die gesamte Breite des Containers einnehmen (vertikal untereinander angeordnet).
Lass die Links display: block sein, damit sie die gesamte Breite einnehmen. Die übrige Gestaltung (Farben, Rahmen usw.) bleibt dir überlassen. Sie kann wie im folgenden Beispielbild aussehen.

2. Stile für größere Bildschirme

Eine Medienabfrage für Bildschirme mit min-width: 768px ist bereits vorhanden.
Ändere darin das Menü-Layout in eine horizontale Anordnung, indem du display: flex für .menu verwendest.
passe den Abstand zwischen den Menüelementen so an, dass er dem folgenden Beispielbild entspricht.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
  <title>What “mobile-first” means</title>
  <style>
    /* Write your mobile-first CSS here */
    .menu {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu li {
      margin-bottom: 10px;
    }
    
    .menu a {
      
    }
    
    /* Bigger screen styles */
    @media (min-width: 768px) {
      .menu {
       
      }
      
      .menu li {
      
      }
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>