PhpBB Lab Académie

Réécrire l’adaptation du menu en mobile-first, comprendre min-width et supprimer l’ancienne règle max-width pour garder une seule stratégie cohérente.

Une autre organisation du même réglage

La leçon précédente partait d’une rangée et passait en colonne avec max-width. Nous allons exprimer notre intention dans l’autre sens : commencer par une colonne, puis utiliser une rangée lorsque l’espace suffit.

On appelle cette démarche mobile-first. Elle consiste ici à écrire d’abord la présentation simple des petites largeurs ; elle ne détecte pas un téléphone et ne crée pas une version HTML distincte.

1. Comprendre min-width dans une condition

@media (min-width: 40rem)

Cette condition signifie « largeur du viewport de 40rem ou plus ». À l’inverse, max-width: 40rem signifiait « 40rem ou moins ».

Les deux comparaisons incluent l’égalité. Au seuil exact, notre nouvelle version choisira la rangée, là où la précédente choisissait la colonne. C’est un choix explicite, pas une équivalence mathématique stricte. Nous ne conservons pas les deux conditions concurrentes.

2. Changer la base

Dans la règle ordinaire .navigation-principale, ajoutez flex-direction: column; et remplacez align-items: center; par align-items: flex-start;.

Display, gap, wrap et la remise à zéro de la liste restent inchangés. Sans condition active, le menu se présente donc en colonne. Les liens sont toujours Accueil, À propos et Contact.

3. Remplacer l’ancienne media query, pas en ajouter une seconde

Supprimez entièrement le bloc @media (max-width: 40rem) de la leçon précédente, avec ses deux règles de déclaration. À sa place, après la règle de base, écrivez :

@media (min-width: 40rem) {
    .navigation-principale {
        flex-direction: row;
        align-items: center;
    }
}

Lorsque cette condition est vraie, row reprend la disposition en ligne et center retrouve l’alignement transversal de la rangée. Les autres propriétés ne sont toujours pas répétées.

4. Tester de part et d’autre du seuil

Vérifiez une largeur juste inférieure à 40rem, puis une largeur égale ou supérieure. Les unités de media query utilisent la base initiale du navigateur ou les préférences de l’utilisateur. Avec une base initiale de 16 pixels CSS, 40rem correspondent à 640 pixels CSS ; ce nombre n’est pas une constante pour toutes les configurations.

La grille des notes n’a pas besoin d’une nouvelle media query : son nombre de colonnes dépend déjà de sa propre place. Deux composants d’une page peuvent donc employer des mécanismes d’adaptation différents.

5. Éviter les règles inutiles

N’ajoutez pas un seuil pour chaque modèle de téléphone. Si un seuil de menu suffit pour notre contenu, gardez-le. Si votre texte personnalisé exige un autre point, mesurez et justifiez cette adaptation.

Après le remplacement, recherchez max-width: 40rem dans la feuille pour vérifier que l’ancien bloc conditionnel a disparu. Une propriété max-width d’un élément peut rester ailleurs : elle n’est pas cette media query.

La prochaine leçon vérifiera les débordements réels des textes, du tableau et du formulaire, au lieu de limiter les tests au nombre de colonnes.

État final du menu, à conserver à partir de cette leçon :

.navigation-principale {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    flex-direction: column;
}

@media (min-width: 40rem) {
    .navigation-principale {
        flex-direction: row;
        align-items: center;
    }
}

Étape 1

Dans le bloc ordinaire du menu, définissez flex-direction: column; et align-items: flex-start;.

Étape 2

Supprimez l’ancien bloc @media (max-width: 40rem). Ne laissez pas ses accolades sans contenu ni une moitié de règle.

Étape 3

Ajoutez à sa place la condition min-width: 40rem avec flex-direction: row; et align-items: center;.

Étape 4

Testez les trois pages de part et d’autre du seuil. Sur petite largeur, le menu doit rester complet en colonne.

Étape 5

Expliquez pourquoi les deux versions ne prennent pas la même décision au seuil exact de 40rem.

Mobile-first définit une base adaptée aux petites largeurs, puis ajoute le changement nécessaire avec min-width. Le remplacement de l’ancien bloc fait partie de l’exercice ; ne cumulez pas deux stratégies contradictoires.