Adapter la mise en page aux écrans

Une page conçue pour un grand écran peut devenir difficile à lire sur un téléphone : les colonnes se resserrent, le texte manque de place et les blocs débordent. Dans cette leçon, vous allez adapter la page de présentation de l’atelier de jardinage à différentes largeurs, en conservant une seule feuille de style.

Vous avez déjà utilisé les sélecteurs pour cibler les éléments de la page, et les variables CSS pour centraliser les valeurs réutilisées. Les requêtes média s’ajoutent à ces règles : elles permettent d’activer certaines déclarations uniquement lorsque des conditions d’affichage, comme la largeur de la fenêtre, sont réunies.

Commencer par les petits écrans

L’approche mobile-first consiste à écrire d’abord les styles qui fonctionnent sur un écran étroit, puis à enrichir la mise en page lorsque davantage d’espace est disponible. Sur un téléphone, une seule colonne est généralement plus lisible que plusieurs colonnes comprimées. Les règles de base s’appliquent donc sans condition ; les requêtes média servent ensuite à les modifier ou à les compléter.

Ajouter une requête média

Une requête média commence par @media, suivie d’une condition entre parenthèses et d’un bloc contenant des règles CSS. Dans l’exemple, la mise en page passe à deux colonnes lorsque la fenêtre atteint au moins 48 rem. Ce seuil est un point de rupture : choisissez-le en fonction du moment où votre contenu manque d’espace, et non d’un modèle de téléphone précis.

:root {
    --couleur-fond: #f4f1e8;
    --couleur-texte: #26352b;
    --couleur-accent: #356b45;
    --espace: 1rem;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--couleur-texte);
    background-color: var(--couleur-fond);
    font-family: Arial, sans-serif;
    line-height: 1.5;
}

.page {
    width: 100%;
    padding: var(--espace);
}

.entete,
.contact {
    padding: var(--espace);
    background-color: #ffffff;
    border: 1px solid #c8d1c6;
}

.contenu {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace);
    margin-block: var(--espace);
}

.conseils,
.horaires {
    padding: var(--espace);
    background-color: #ffffff;
}

a {
    color: var(--couleur-accent);
}

@media (min-width: 48rem) {
    .page {
        max-width: 72rem;
        margin-inline: auto;
        padding: 2rem;
    }

    .contenu {
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }

    .entete {
        padding: 2rem;
    }
}

Enregistrez ces règles dans style.css, puis reliez cette feuille à votre document HTML comme vous l’avez fait dans les leçons précédentes. La classe .contenu reçoit d’abord une seule colonne, adaptée à une fenêtre étroite. À partir de 48 rem, les conseils occupent deux parts de la grille et les horaires une part ; la largeur maximale et les marges automatiques évitent que l’ensemble s’étire excessivement sur un écran très large.

Comprendre l’effet des règles

Lorsque la fenêtre est plus étroite que 48 rem, les déclarations placées dans la requête média ne s’appliquent pas : la page reste sur une colonne et ses marges intérieures sont réduites. Dès que la condition est satisfaite, les déclarations de la requête s’ajoutent aux styles de base ou les remplacent pour les propriétés identiques. Vous obtenez ainsi deux adaptations ciblées sans recopier toutes les règles du site.

À retenir

• Écrivez les styles de base pour les petits écrans, puis adaptez-les avec @media.
• Utilisez un point de rupture lorsque le contenu a besoin de plus d’espace.
• Les règles d’une requête média ne s’appliquent que si sa condition est remplie.
• Testez la page à plusieurs largeurs pour vérifier que les changements améliorent réellement la mise en page.

Dans la prochaine leçon, vous ajouterez des styles aux états interactifs des liens et des autres éléments de la page.