Mobile-first

Definition

Approche de design qui commence par le layout mobile puis ajoute de la complexité via min-width media queries pour les écrans plus grands. Le CSS de base sert le mobile.

Analogie

Comme construire une maison en commençant par les fondations solides (mobile) avant d'ajouter les étages (desktop).

Exemple de code

/* Base : mobile */
.grid { display: flex; flex-direction: column; }
/* Tablette */
@media (min-width: 768px) {
  .grid { flex-direction: row; flex-wrap: wrap; }
}
/* Desktop */
@media (min-width: 1024px) {
  .grid { flex-wrap: nowrap; }
}

Cas d'usage

Tout projet web moderne, vu que la majorité du trafic vient du mobile.

Anti-pattern

Termes lies