PhpBB Lab Académie

Continuer avec le même petit site et la même feuille styles.css, comprendre le rôle d’une media query, écrire une première règle conditionnelle avec @media, adapter explicitement la grille de la page d’accueil à une largeur plus étroite sans supprimer les comportements déjà construits avec Grid et Flexbox, puis préparer l’adaptation des vrais contenus sensibles du site comme l’image et le tableau.

Avant de commencer

Dans les leçons précédentes, nous avons déjà rendu plusieurs parties du site adaptables.

La navigation utilise :

flex-wrap: wrap;

pour permettre aux liens :

Accueil
À propos
Contact

de revenir sur plusieurs lignes lorsque l’espace devient insuffisant.

La grille de la page d’accueil utilise :

grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

pour adapter automatiquement le nombre de colonnes.

Nous avons également utilisé :

max-width

pour éviter certaines dimensions trop rigides.

Ces techniques fonctionnent sans demander une règle différente pour chaque largeur d’écran.

Nous allons maintenant découvrir une autre possibilité importante :

les media queries

Une media query permet d’appliquer certaines règles CSS seulement lorsque des conditions sont remplies.

Dans cette première leçon du nouveau chapitre, nous allons répondre à quatre questions :

- Qu’est-ce qu’une media query ?
- Comment écrire une condition de largeur ?
- Comment modifier une règle uniquement lorsque l’espace devient plus étroit ?
- Pourquoi une media query doit-elle compléter les comportements adaptables existants plutôt que les remplacer sans raison ?

À la fin de cette leçon, notre grille d’accueil possédera une adaptation explicite pour les espaces plus étroits, tout en conservant Flexbox et Grid déjà construits.

1. Nous continuons dans le même fichier

Nous ne créons aucun nouveau fichier.

Nous continuons dans :

styles.css

La partie Grid peut actuellement contenir :

/* Grille de la page d’accueil */

.grille-accueil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.grille-accueil > section {
    margin-bottom: 0;
}

.section-pages-site {
    grid-column: 1 / -1;
}

Cette grille est déjà adaptable.

Nous allons lui ajouter une règle conditionnelle.

2. Qu’est-ce qu’une media query ?

Une media query permet de demander au navigateur :

si une condition est vraie,
alors applique ces règles CSS

Par exemple, nous pouvons vouloir dire :

si l’espace disponible devient suffisamment étroit,
utilise une seule colonne pour la grille d’accueil

La règle générale continue d’exister.

La media query ajoute une adaptation pour une situation précise.

3. Découvrir @media

Une media query commence par :

@media

Nous allons utiliser :

@media (max-width: 40rem) {
    ...
}

Cette écriture contient :

@media
= début de la règle conditionnelle

max-width
= largeur maximale correspondant à la condition

40rem
= valeur choisie pour notre seuil

Les règles placées entre les accolades ne seront utilisées que lorsque cette condition sera satisfaite.

4. Comprendre max-width dans une media query

Nous avons déjà rencontré la propriété :

max-width

pour limiter la largeur d’un élément.

Dans une media query, l’écriture :

(max-width: 40rem)

n’est pas une déclaration appliquée à un élément.

Il s’agit d’une condition.

Nous pouvons la lire :

lorsque la largeur de la zone d’affichage est au maximum de 40rem

Autrement dit :

40rem ou moins

la partie placée dans la media query peut s’appliquer.

5. Pourquoi utiliser une unité déjà connue ?

Nous utilisons :

40rem

parce que vous connaissez déjà l’unité

rem

.

Cette valeur sert ici de seuil pour notre petit site.

Elle n’est pas une valeur universelle à utiliser dans tous les projets.

Nous devons toujours choisir un seuil en observant le moment où notre propre contenu a besoin d’une adaptation.

Retenez :

un breakpoint doit répondre au contenu

et non à un modèle d’appareil appris par cœur

6. Ajouter notre première media query

À la fin de

styles.css

, ajoutez :

/* Adaptation aux espaces plus étroits */

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

Enregistrez puis actualisez :

index.html

Sur une fenêtre suffisamment large, la grille continue à utiliser sa règle normale.

Lorsque la largeur passe sous le seuil choisi, la media query demande explicitement :

une seule colonne

7. Ce que nous avons réellement ajouté

Notre règle générale reste :

.grille-accueil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

Puis nous ajoutons :

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

Nous n’avons pas supprimé la règle générale.

Nous avons ajouté une règle qui ne s’applique que dans une situation particulière.

8. La cascade continue de fonctionner

Dans la media query, nous retrouvons le même sélecteur :

.grille-accueil

et la même propriété :

grid-template-columns

Lorsque la condition de la media query est vraie, cette nouvelle déclaration participe à la cascade.

Elle apparaît plus tard dans notre feuille et utilise le même sélecteur.

Dans ce cas, elle peut remplacer la valeur générale de :

grid-template-columns

Nous réutilisons donc une notion déjà étudiée :

la cascade

9. Pourquoi forcer une seule colonne ici ?

Notre grille avec :

auto-fit

est déjà capable de réduire son nombre de colonnes.

La media query ne sert donc pas à réparer une grille incapable de s’adapter.

Nous ajoutons ici une décision explicite :

à partir d’une certaine largeur,
nous préférons une seule colonne

Cela peut donner davantage d’espace à :

- l’image ;
- le tableau ;
- les paragraphes ;
- les titres.

La media query complète donc Grid.

Elle ne remplace pas son comportement adaptable général.

10. Tester au-dessus du seuil

Agrandissez la fenêtre jusqu’à dépasser :

40rem

La règle conditionnelle ne doit plus imposer :

grid-template-columns: 1fr;

La grille reprend alors sa définition générale :

repeat(auto-fit, minmax(18rem, 1fr))

Selon l’espace disponible, plusieurs colonnes peuvent apparaître.

11. Tester sous le seuil

Réduisez ensuite la largeur de la fenêtre.

Lorsque la condition :

max-width: 40rem

devient vraie, la grille doit passer explicitement à :

1fr

Les quatre sections se retrouvent donc sur une seule colonne.

L’ordre reste :

Ce que j’ai appris

Mes notes de progression

Mon espace de travail

Les pages de mon site

12. Tester le zoom

Augmentez le zoom du navigateur.

Comme nous l’avons déjà observé dans les chapitres précédents, le zoom réduit l’espace disponible pour la mise en page.

La media query peut donc finir par devenir active lorsque l’espace disponible descend sous le seuil.

Vérifiez que la page reste compréhensible lorsque la grille passe sur une seule colonne.

13. L’ordre logique ne change pas

La media query modifie :

la disposition

Elle ne modifie pas :

l’ordre du document HTML

Parcourez les titres.

Vous devez toujours retrouver :

Accueil

Ce que j’ai appris

Mes notes de progression

Ma première page complète

Mon formulaire de contact

Mon espace de travail

Les pages de mon site

dans cet ordre.

Nous continuons à adapter la présentation sans réorganiser artificiellement le contenu.

14. La navigation Flexbox continue à fonctionner

Notre media query ne contient aucune règle pour :

.navigation-principale

La navigation continue donc à utiliser :

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;

Nous n’avons aucune raison de remplacer ce comportement.

Flexbox possède déjà une adaptation naturelle grâce à :

flex-wrap: wrap;

Nous modifions uniquement ce qui en a besoin.

15. Une media query ne doit pas contenir tout le CSS du site

Nous pourrions recopier à l’intérieur de la media query :

body
h1
h2
h3
section
.navigation-principale
.grille-accueil

avec toutes leurs propriétés.

Ce serait inutile.

Une media query doit contenir uniquement les adaptations nécessaires à la condition étudiée.

Ici, nous avons besoin de modifier :

grid-template-columns

Nous n’allons donc pas recopier toute la feuille CSS.

16. Garder une règle générale avant l’adaptation

Notre organisation devient :

règles générales

puis

règles conditionnelles

Cela nous permet de lire la feuille dans cet ordre :

voici le comportement normal

puis voici ce qui change dans un espace plus étroit

Cette organisation reste cohérente avec la manière dont nous avons déjà structuré

styles.css

avec des commentaires.

17. Ajouter un commentaire clair

Nous avons écrit :

/* Adaptation aux espaces plus étroits */

Ce commentaire décrit le rôle du groupe qui suit.

Nous évitons un commentaire comme :

/* Mobile */

car notre condition ne détecte pas un type d’appareil.

Elle vérifie simplement une largeur disponible.

Une petite fenêtre sur un ordinateur peut aussi satisfaire cette condition.

Un écran de téléphone en mode particulier peut présenter une autre largeur.

Retenez :

une media query répond à une condition

pas au nom supposé d’un appareil

18. Ne pas multiplier les breakpoints sans besoin

Nous pourrions créer immédiatement :

30rem

40rem

50rem

60rem

70rem

avec une règle différente à chaque seuil.

Ce n’est pas notre objectif.

Nous ajoutons un breakpoint uniquement lorsqu’un besoin réel apparaît.

Pour le moment, nous avons identifié un besoin simple :

garantir une seule colonne dans les espaces plus étroits

Un seul seuil suffit donc pour cette première leçon.

19. La valeur 40rem doit être testée

Nous avons choisi :

40rem

comme valeur pédagogique pour notre projet.

Mais nous devons vérifier le résultat.

Testez notamment :

- juste au-dessus du seuil ;
- juste en dessous du seuil ;
- avec un zoom important ;
- avec le tableau visible ;
- avec l’image visible.

Si le contenu devenait inconfortable avant ou après ce seuil, nous pourrions ajuster la valeur.

Le breakpoint doit suivre le contenu réel.

20. Ne pas chercher des tailles d’appareils célèbres

Il serait tentant de demander :

quelle est la largeur d’un téléphone ?

quelle est la largeur d’une tablette ?

Mais il existe une grande variété de tailles, de zooms et de réglages.

Nous préférons nous demander :

à quel moment notre mise en page a-t-elle besoin de changer ?

C’est une méthode plus durable.

21. Vérifier les quatre sections

Sous le seuil, vérifiez :

Ce que j’ai appris

Mes notes de progression

Mon espace de travail

Les pages de mon site

Chaque section doit occuper toute la largeur de la grille à une colonne.

La règle :

.section-pages-site {
    grid-column: 1 / -1;
}

reste compatible.

Sur une grille à une seule colonne, cette section occupe simplement cette colonne.

22. Vérifier la section Mon espace de travail

La section :

Mon espace de travail

contient :

ordinateur.jpg

Le passage à une seule colonne lui donne davantage d’espace.

Mais cela ne garantit pas encore que l’image elle-même s’adapte parfaitement à toutes les largeurs.

L’image possède ses propres dimensions intrinsèques.

Nous allons traiter ce point dans la prochaine leçon.

23. Vérifier la section Les pages de mon site

Cette section contient le tableau :

Rôle des trois pages principales

Une seule colonne donne davantage d’espace à la section.

Mais le tableau peut encore avoir besoin d’un comportement particulier si son contenu devient plus large que l’espace disponible.

Nous allons également traiter ce problème dans la prochaine leçon.

24. Notre première media query complète

À la fin de la feuille, nous pouvons maintenant avoir :

/* Adaptation aux espaces plus étroits */

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

Nous pouvons la lire ainsi :

si la largeur disponible est de 40rem ou moins

alors

la grille d’accueil utilise une seule colonne

Chaque partie possède donc un rôle que nous pouvons expliquer.

25. Une media query complète les techniques déjà utilisées

Notre site utilise maintenant plusieurs mécanismes d’adaptation :

max-width

flex-wrap

auto-fit

minmax()

@media

Ils ne jouent pas tous le même rôle.

flex-wrap

permet aux éléments Flexbox de revenir à la ligne.

auto-fit

et

minmax()

permettent à Grid d’adapter ses colonnes.

@media

nous permet d’ajouter une décision conditionnelle précise.

Nous construisons donc l’adaptation par plusieurs outils complémentaires.

26. Ne pas oublier l’accessibilité

Une mise en page responsive ne consiste pas seulement à :

faire tenir la page sur un petit écran

Nous devons aussi vérifier :

- le zoom ;
- le reflow du contenu ;
- l’ordre logique ;
- le clavier ;
- la lisibilité du texte ;
- l’absence d’informations perdues.

La media query ne doit jamais cacher un contenu important simplement parce que la largeur diminue.

Dans notre première adaptation, nous changeons seulement le nombre de colonnes.

Aucune information n’est supprimée.

27. Préparer la prochaine étape

Notre grille s’adapte maintenant explicitement aux espaces plus étroits.

Mais deux contenus réels méritent encore une attention particulière :

ordinateur.jpg

dans :

Mon espace de travail

et le tableau de :

Les pages de mon site

Dans la prochaine leçon, nous continuerons avec exactement ces contenus.

Nous apprendrons à :

- rendre l’image plus souple ;
- éviter qu’elle dépasse son conteneur ;
- gérer un tableau qui pourrait devenir plus large que l’espace disponible ;
- conserver l’accès à toutes les informations.

Nous continuerons donc toujours avec le même site.

28. Ce que vous devez comprendre avant la prochaine leçon

Vous devez maintenant être capable d’expliquer :

- ce qu’est une media query ;
- le rôle de

@media

;
- ce que signifie

(max-width: 40rem)

;
- pourquoi cette écriture représente une condition et non une propriété appliquée à un élément ;
- pourquoi nous gardons la règle générale de Grid en dehors de la media query ;
- pourquoi la media query contient uniquement l’adaptation nécessaire ;
- pourquoi nous utilisons ici une seule colonne sous le seuil choisi ;
- pourquoi le breakpoint doit suivre le contenu plutôt qu’un modèle d’appareil ;
- pourquoi nous ne multiplions pas les breakpoints sans besoin ;
- pourquoi l’ordre logique du document reste inchangé ;
- comment cette media query complète

flex-wrap

,

auto-fit

et

minmax()

.

Retenez surtout :

@media (max-width: 40rem) {
    ...
}

= applique les règles placées à l’intérieur
lorsque la condition de largeur est satisfaite

Dans la prochaine leçon, nous conserverons cette media query et nous adapterons l’image

ordinateur.jpg

ainsi que le tableau réel de la page d’accueil.

Reprenons la grille déjà construite :

.grille-accueil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

Nous ajoutons à la fin de

styles.css

:

/* Adaptation aux espaces plus étroits */

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

Au-dessus de :

40rem

la grille conserve son comportement général avec

auto-fit

.

À :

40rem ou moins

nous demandons explicitement une seule colonne.

Nous adaptons donc la vraie grille du projet sans supprimer les comportements construits dans les leçons précédentes.

Continuez avec le même petit site et le même fichier :

styles.css

1. Reprendre la règle générale

Vérifiez que vous avez toujours :

.grille-accueil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

Ne supprimez pas cette règle.

2. Ajouter le commentaire

À la fin de la feuille, ajoutez :

/* Adaptation aux espaces plus étroits */

3. Écrire la media query

Ajoutez :

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

4. Tester une largeur supérieure au seuil

Agrandissez la fenêtre.

Vérifiez que la grille peut utiliser plusieurs colonnes.

5. Tester une largeur inférieure au seuil

Réduisez la fenêtre.

Vérifiez que la grille passe à une seule colonne lorsque la condition est satisfaite.

6. Tester le zoom

Augmentez le zoom du navigateur.

Vérifiez que le passage à une colonne reste cohérent et qu’aucune information ne disparaît.

7. Vérifier l’ordre logique

Parcourez les titres de

index.html

.

Vérifiez que l’ordre du document reste inchangé.

8. Vérifier la navigation

Parcourez :

Accueil
À propos
Contact

au clavier.

Vérifiez que la navigation Flexbox continue à fonctionner avec

flex-wrap

.

9. Repérer les contenus de la prochaine leçon

Sur

index.html

, repérez :

ordinateur.jpg

dans

Mon espace de travail

,

puis le tableau de :

Les pages de mon site

Ne modifiez pas encore ces éléments.

Ils seront utilisés dans la prochaine leçon.

10. Expliquer ce que vous avez fait

Sans regarder la correction, expliquez avec vos propres mots :

1. ce qu’est une media query ;
2. ce que signifie

max-width: 40rem

dans la condition ;
3. pourquoi la règle générale de Grid reste en dehors de la media query ;
4. pourquoi nous utilisons

grid-template-columns: 1fr;

sous ce seuil ;
5. pourquoi le breakpoint doit dépendre du contenu ;
6. pourquoi nous ne créons pas une media query différente pour chaque appareil ;
7. quels deux contenus réels seront adaptés dans la prochaine leçon.

Dans cette leçon, nous avons découvert les media queries.

Une media query permet d’appliquer des règles CSS seulement lorsque certaines conditions sont satisfaites.

Nous avons ajouté :

@media (max-width: 40rem) {
    .grille-accueil {
        grid-template-columns: 1fr;
    }
}

La condition :

max-width: 40rem

signifie ici :

lorsque la largeur disponible est de 40rem ou moins

La règle générale de Grid reste en place.

La media query ajoute seulement une adaptation précise :

une seule colonne dans les espaces plus étroits

Nous avons également retenu qu’un breakpoint doit être choisi selon le comportement réel du contenu et non selon le nom d’un appareil.

Enfin, nous avons vérifié que la media query complète les techniques déjà utilisées :

flex-wrap
max-width
auto-fit
minmax()

sans modifier l’ordre logique du document.

Dans la prochaine leçon, nous continuerons avec le même site pour rendre l’image

ordinateur.jpg

plus souple et gérer le tableau réel lorsqu’il manque de largeur.