Co oznacza „mobile-first”

Część sekcji Praktyczny frontend ścieżki HTML w Coddy. Lekcja 6 z 35.

Mobile-first to strategia projektowania, w której najpierw tworzysz stronę internetową z myślą o urządzeniach mobilnych, a następnie stopniowo dostosowujesz ją do większych ekranów.
Główna idea jest taka, że większość użytkowników przegląda dziś internet na telefonach, więc rozpoczęcie od małych ekranów gwarantuje, że Twoja strona będzie dobrze działać dla większości odwiedzających.

Zacznij od napisania stylów mobilnych:

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

Następnie użyj zapytań o media, aby dostosować projekt do większych ekranów:

/* Style dla urządzeń szerszych niż 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

To podejście sprawia, że Twoja strona działa dobrze najpierw na małych ekranach, a następnie zapewnia lepsze wrażenia użytkownikom większych urządzeń.

Wyzwanie

Łatwy

Otrzymujesz kod HTML z prostym menu nawigacyjnym. Twoim zadaniem jest ostylowanie go przy użyciu podejścia mobile-first.

1. Najpierw style dla urządzeń mobilnych

Ustaw każdy element menu na pełną szerokość kontenera (elementy powinny być ułożone jeden pod drugim).
Ustaw dla linków display: block, aby zajmowały całą szerokość. Pozostałe style (kolory, obramowania itp.) zależą od Ciebie. Mogą wyglądać tak jak na poniższym przykładzie.

2. Style dla większych ekranów

Dla ekranów min-width: 768px przygotowano już zapytanie o media.
W jego obrębie zmień układ menu na poziomy, ustawiając display: flex dla .menu.
Dostosuj odstępy między elementami menu tak, aby odpowiadały poniższemu przykładowi.

Spróbuj swoich sił

<!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>