PhpBB Lab Académie

Comprendre viewport et point de rupture, ajouter la déclaration de viewport aux trois pages et adapter le même menu avec une condition max-width.

Une adaptation précise du même site

Le menu revient déjà à la ligne grâce à Flexbox et les deux notes s’adaptent grâce à Grid. Nous allons maintenant apprendre à déclencher une présentation différente du menu : une colonne sur une petite largeur.

Une media query applique des règles lorsque certaines conditions sont satisfaites. Ce n’est ni une nouvelle page ni un outil de détection d’une marque de téléphone.

1. Vérifier le viewport des trois documents

Le viewport est la zone d’affichage de la page utilisée ici pour évaluer la largeur. Dans les corrections HTML de départ, la déclaration suivante n’était pas encore présente. Ajoutez-la après meta charset, une seule fois dans le head de chaque page :

<meta name="viewport" content="width=device-width, initial-scale=1">

Sur mobile, width=device-width demande une largeur de mise en page adaptée à celle de l’appareil ; initial-scale=1 fixe l’échelle initiale. Cette déclaration n’est pas une mise en page CSS en elle-même. Ne lui ajoutez pas user-scalable=no ni un maximum-scale qui empêcherait l’agrandissement.

Conservez votre link vers styles.css et le title propre à chaque document.

2. Choisir un changement utile

Dans une fenêtre étroite, le menu peut déjà rester lisible avec wrap. Une media query n’est donc pas obligatoire pour toute adaptation. Pour notre projet, nous choisissons de présenter les trois liens en colonne en dessous d’une largeur de travail.

Le point de rupture est le seuil où nous appliquons ce changement. Observez les liens et leurs espaces ; ne choisissez pas le seuil d’après un modèle d’appareil. Nous utilisons 40rem pour apprendre, puis nous vérifions le résultat avec le vrai contenu.

3. Lire @media et sa condition

@media (max-width: 40rem) {
    .navigation-principale {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media ouvre une règle conditionnelle. Les parenthèses contiennent la condition : la largeur du viewport est de 40rem ou moins. Les accolades extérieures entourent les règles conditionnelles ; les accolades intérieures entourent les déclarations du sélecteur.

Ici, max-width est une caractéristique interrogée, pas la propriété qui limitait une boîte au chapitre 3. La condition n’impose pas une largeur de 40rem aux liens.

4. Comprendre column avant de l’appliquer

Nous avons rencontré flex-direction avec la direction row. La valeur column place désormais l’axe principal dans la direction des blocs, verticale dans notre document. Les liens se disposent donc les uns sous les autres.

L’axe transversal devient horizontal ; align-items: flex-start; place les éléments au début de cet axe au lieu de les centrer. Le gap existant garde les intervalles. Nous n’avons pas besoin de recopier display: flex dans la media query.

5. Placer et tester la règle

Ajoutez le bloc @media après les règles ordinaires de styles.css. Quand sa condition est vraie, son sélecteur a la même spécificité que la règle de base et ses déclarations plus tardives remplacent celles des mêmes propriétés. Les autres propriétés restent présentes.

Au-dessus de 40rem, le menu reste en row ; à 40rem ou moins, il passe en column. Les rem dans une condition média se fondent sur la taille initiale de police du navigateur ou les préférences de l’utilisateur, pas sur une déclaration font-size de la page.

Testez les trois pages avec une fenêtre large, étroite puis avec le zoom. Aucun lien ne disparaît. La prochaine leçon exprimera ce même choix en partant de la petite largeur.

Référence technique, pour approfondir

W3C — Media Queries, largeur et unités relatives

Dans les trois head, ajoutez uniquement la déclaration de viewport si elle n’existe pas déjà. Dans styles.css, après les règles de base :

@media (max-width: 40rem) {
    .navigation-principale {
        flex-direction: column;
        align-items: flex-start;
    }
}

Étape 1

Ajoutez la meta viewport dans le head de index.html, apropos.html et contact.html. Ne dupliquez pas une déclaration déjà présente.

Étape 2

Conservez la règle Flexbox existante du menu, puis ajoutez la media query max-width: 40rem à la fin de styles.css.

Étape 3

Vérifiez que le menu est en rangée sur une largeur supérieure au seuil, et en colonne au seuil ou en dessous.

Étape 4

Testez le zoom et parcourez les trois liens. Ils doivent garder leur texte, leur destination et leur ordre.

Étape 5

Expliquez pourquoi max-width dans cette condition ne fixe pas la largeur du menu.

Une media query filtre des règles selon une condition. Le seuil concerne l’espace d’affichage, pas une marque d’appareil. Le menu devient vertical sur petite largeur sans changer son contenu.