Deux requêtes qui se chevauchent — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 9)

Deux requêtes qui se chevauchent

Responsive design · niveau 2

Énoncé


.menu {
  display: flex;
  gap: 1rem;
}

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    padding: 1rem;
  }
}

@media (min-width: 768px) {
  .menu {
    padding: 2rem;
  }
}

@media (max-width: 600) {
  .menu {
    font-size: 1.25rem;
  }
}

Le menu devait être en colonne avec une marge de 1rem sur les petits écrans, en ligne avec une marge de 2rem sur les grands, et en gros caractères sous 600 pixels. Dans Chromium, à 768 pixels exactement, il est en colonne avec une marge de 2rem ; à 500 pixels, le texte n'est pas agrandi. Expliquer les deux défauts et réécrire la feuille, mobile d'abord, avec la syntaxe d'intervalle.

Corrigé

Premier défaut : max-width et min-width incluent leur borne. À 768 pixels, les deux requêtes sont vraies : le menu reçoit flex-direction: column de la première et la marge de 2rem de la seconde, écrite après. Chromium le confirme : column et 32px.

Second défaut : (max-width: 600) n'a pas d'unité. Une longueur sans unité (autre que 0) est invalide : la requête entière est fausse, à toutes les largeurs. Le vérificateur stylelint signale d'ailleurs les trois requêtes, en proposant la syntaxe d'intervalle.

Réécriture, mobile d'abord :


.menu {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

@media (width < 37.5rem) {
  .menu {
    font-size: 1.25rem;
  }
}

@media (width >= 48rem) {
  .menu {
    flex-direction: row;
    padding: 2rem;
  }
}

Avec < et >=, chaque largeur appartient à un seul intervalle : à 768 pixels, le menu est en ligne, avec une marge de 2rem.