Passer au mobile d'abord — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 9)

Passer au mobile d'abord

Responsive design · niveau 2

Énoncé

La feuille suivante a été écrite pour grand écran, puis corrigée pour les petits. La réécrire « mobile d'abord », avec la syntaxe d'intervalle, sans changer le résultat à aucune largeur.


.horaires {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 2rem;
  font-size: 1.125rem;
  list-style: none;
}

@media (max-width: 59.99rem) {
  .horaires {
    grid-template-columns: repeat(2, 1fr);
    padding: 1rem;
    font-size: 1rem;
  }
}

@media (max-width: 39.99rem) {
  .horaires {
    grid-template-columns: 1fr;
  }
}

Corrigé

On part de la plus petite largeur (une colonne, marges et texte normaux), puis chaque seuil ajoute ce qui change :


.horaires {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 1rem;
  list-style: none;
}

@media (width >= 40rem) {
  .horaires {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 60rem) {
  .horaires {
    grid-template-columns: repeat(3, 1fr);
    padding: 2rem;
    font-size: 1.125rem;
  }
}

Les bornes 59.99rem disparaissent : la syntaxe d'intervalle et l'ordre croissant suffisent. Mesuré dans Chromium (code/ch9/exercices/mobile-first.html) : une colonne et 16 pixels de marge à 375 pixels, deux colonnes à 700, trois colonnes et 32 pixels de marge à 1000.