Ce que signifie « mobile-first »

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 6 sur 35.

Mobile-first est une stratégie de conception qui consiste à créer d’abord votre site web pour les appareils mobiles, puis à l’améliorer progressivement pour les écrans plus grands.
L’idée principale est que la plupart des utilisateurs naviguent désormais sur le Web avec leur téléphone. Commencer par les petits écrans garantit donc que votre site fonctionne bien pour la majorité des visiteurs.

Commence par écrire les styles pour mobile :

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

Utilise ensuite les requêtes média pour adapter ta mise en page aux écrans plus larges :

/* Styles pour les appareils d’une largeur supérieure à 768px */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    padding: 20px;
  }
}

Cette approche garantit que ton site fonctionne bien d’abord sur les petits écrans, puis améliore l’expérience des utilisateurs sur les appareils plus grands.

Défi

Facile

Tu disposes d’un code HTML avec un simple menu de navigation. Ta tâche consiste à le mettre en forme en utilisant l’approche mobile-first.

1. Styles pour mobile d’abord

Fais en sorte que chaque élément du menu occupe toute la largeur du conteneur (en les empilant verticalement).
Fais en sorte que les liens utilisent display: block afin qu’ils occupent toute la largeur. Le reste de la mise en forme (couleurs, bordures, etc.) est à ta discrétion. Le résultat peut ressembler à l’image d’exemple ci-dessous.

2. Styles pour les écrans plus grands

Une requête média est déjà fournie pour les écrans min-width: 768px.
À l’intérieur, modifie la disposition du menu pour qu’elle soit horizontale en utilisant display: flex pour .menu.
Ajoute une margin-right à chaque élément du menu (.menu li) pour espacer les éléments, comme dans l’image d’exemple ci-dessous.

Essayez vous-même

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