Was „Mobile-First“ bedeutet

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

Mobile-first ist eine Designstrategie, bei der Sie Ihre Website zuerst für Mobilgeräte erstellen und sie dann schrittweise für größere Bildschirme erweitern.
Der Grundgedanke dabei ist, dass die meisten Nutzer das Internet mittlerweile über ihr Smartphone nutzen. Wenn man klein anfängt, stellt man sicher, dass die Website für die Mehrheit der Besucher gut funktioniert.

Beginnen Sie mit dem Schreiben von Mobile-Styles:

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

Verwenden Sie dann Media Queries, um Ihr Design für größere Bildschirme anzupassen:

/* Styles für Geräte, die breiter als 768px sind */
@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

Sie erhalten ein HTML-Dokument mit einem einfachen Navigationsmenü. Ihre Aufgabe ist es, dieses mit dem Mobile-First-Ansatz zu gestalten.

1. Zuerst die mobilen Styles

Sorgen Sie dafür, dass jedes Menüelement die volle Breite des Containers einnimmt (vertikal gestapelt).
Setzen Sie die Links auf display: block, damit sie die volle Breite einnehmen. Das restliche Styling (Farben, Rahmen usw.) bleibt Ihnen überlassen. Es könnte wie im Beispielbild unten aussehen.

2. Styles für größere Bildschirme

Ein Media-Query für Bildschirme mit einer min-width: 768px ist bereits vorhanden.
Ändern Sie darin das Menü-Layout auf horizontal, indem Sie display: flex für die Klasse .menu verwenden.
Passen Sie die Abstände zwischen den Menüelementen so an, dass sie dem Beispielbild unten entsprechen.

Spickzettel

Mobile-First ist eine Designstrategie, bei der Sie Ihre Website zuerst für mobile Geräte erstellen und sie dann schrittweise für größere Bildschirme erweitern.

Beginnen Sie mit dem Schreiben von Mobile-Styles:

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

Verwenden Sie dann Media Queries, um Ihr Design für größere Bildschirme anzupassen:

/* Styles für Geräte, die breiter als 768px sind */
@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.

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>