📱 CSS Mobile First avec Media Queries¶

✅ Principe Mobile First¶

On écrit d’abord les styles pour les petits écrans (mobile).

Ces styles sont la base du site et s'appliqueront aussi sur les écrans plus grands...On ajoute des styles
Ensuite, on ajoute des media queries progressives pour les écrans plus larges.
L’ordre dans la feuille CSS doit suivre :
Styles globaux (mobile par défaut)
@media (max-width: …) pour styles uniques aux mobiles qui ne doivent pas s'appliquer aux autres écrans
@media (min-width: …) pour tablettes
@media (min-width: …) pour ordinateurs de bureau

📝 Exemple de structure d’une feuille CSS¶

/* 1. Styles de base (mobiles en premier) */
* {
    box-sizing: border-box;
}

body {
  font-size: 1rem;
  margin: 0;
}

nav {
  display: flex;
  flex-direction: column; /* menu vertical sur mobile */
  gap: 0.5rem;
}

/* 2. Styles pour écrans moyens (tablettes ≥ 600px) */
@media screen and (min-width: 600px) {
  nav {
    flex-direction: row; /* menu horizontal */
    justify-content: space-around;
  }

  body {
    font-size: 1.1rem;
  }
}

/* 3. Styles pour écrans larges (desktop ≥ 900px) */
@media screen and (min-width: 900px) {
  body {
    font-size: 1.2rem;
  }

  nav {
    justify-content: end;
    gap: 2rem;
  }
}

📐 Points de rupture courants¶

600px → Tablettes en mode portrait
900px → Tablettes en paysage, écrans de bureau
(optionnel) 1200px ou plus → Grands écrans / moniteurs larges

🔑 À retenir¶

Toujours écrire les styles mobiles par défaut en premier.
Ajouter les media queries du plus petit au plus grand (progressive enhancement).
Les styles définis dans un media query s'ajoutent aux styles de base ou remplacent ceux qui sont redéfinis.