Choisir des points de rupture utiles

Une page peut être lisible sur un téléphone et sur un ordinateur tout en devenant difficile à utiliser entre les deux. Les liens se serrent, les titres se replient de façon peu naturelle ou les horaires prennent trop peu de place. Dans cette leçon, vous allez choisir les largeurs où une adaptation devient nécessaire en observant le contenu réel de la page de l’atelier.

Un point de rupture est une largeur de viewport à partir de laquelle vous appliquez une autre règle de présentation. Il ne correspond pas obligatoirement à un modèle de téléphone ou de tablette : ces catégories couvrent des dimensions variées et ne disent pas si votre contenu tient correctement. La question utile est plutôt : à quelle largeur la mise en page actuelle cesse-t-elle d’être confortable ?

Partir d’une base mobile-first

En mobile-first, vous écrivez d’abord les styles adaptés à une petite largeur, puis vous ajoutez des adaptations pour les viewports plus larges. Cette base évite de supposer qu’un grand écran est le cas principal et garde les styles essentiels hors des media queries. Une media query est une condition CSS : les règles qu’elle contient ne s’appliquent que lorsque cette condition est satisfaite.

Vous avez déjà réparti les liens de navigation avec Flexbox et construit des zones de page avec Grid. Sans revenir sur ces mécanismes, partez de leur rendu à petite largeur : vérifiez si le nom de l’atelier, les liens, les horaires, les conseils et le contact restent lisibles et accessibles dans l’ordre prévu. Une adaptation n’est justifiée que si un problème observable apparaît ou si une amélioration nette est nécessaire.

Trouver la largeur à partir du contenu

Commencez par réduire progressivement la fenêtre du navigateur, puis repérez le premier défaut concret : des liens qui se touchent, un titre qui occupe trop de lignes, ou une zone de contenu devenue étroite. Notez la largeur où le défaut apparaît et celle où il disparaît lorsque vous agrandissez la fenêtre. Choisissez ensuite une valeur proche de cette transition, en laissant une marge suffisante pour les contenus qui peuvent varier, comme un intitulé de conseil plus long.

Par exemple, vous pouvez constater que la navigation devient trop serrée sous environ 48 rem et que le titre principal respire mieux lorsque le contenu dispose d’une largeur plus généreuse. Ces mesures ne sont pas universelles : elles résultent de votre contenu, de la police choisie et des espacements de votre feuille de styles. Testez également des largeurs juste avant et juste après le point retenu, afin de vérifier que la transition ne crée pas un nouveau défaut.

/* Styles de base : petites largeurs */
:root {
    --couleur-texte: #24332b;
    --couleur-fond: #f5f3eb;
    --espace: 1rem;
}

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

.page-atelier {
    width: calc(100% - 2 * var(--espace));
    max-width: 72rem;
    margin-inline: auto;
}

h1 {
    font-size: 1.8rem;
}

/* Ajout d'air quand le contenu dispose de plus de place */
@media (min-width: 48rem) {
    :root {
        --espace: 1.5rem;
    }

    h1 {
        font-size: 2.4rem;
    }
}

Dans cet exemple, les styles de base s’appliquent à toutes les largeurs, tandis que la media query augmente l’espacement et la taille du titre à partir de 48 rem. Avec une taille de base du navigateur de 16 pixels, ce seuil équivaut généralement à 768 pixels. Le conteneur conserve toutefois une largeur maximale : sur un très grand écran, le texte ne s’étire pas indéfiniment.

Garder des règles faciles à suivre

Ajoutez un point de rupture seulement lorsqu’il résout un problème de mise en page identifiable. Une page peut n’en nécessiter qu’un, ou plusieurs si différentes parties se dégradent à des largeurs distinctes. Évitez d’ajouter un seuil à chaque variation de quelques pixels : cela rend les règles difficiles à comprendre et à tester sans apporter forcément un meilleur résultat.

Dans la feuille unique style.css, placez chaque media query près des règles qu’elle adapte, ou regroupez-les de manière cohérente si votre projet adopte cette organisation. Gardez les sélecteurs et les déclarations identifiables, et commentez le motif du seuil, par exemple « les liens manquent d’espace sous 48 rem ». Ce commentaire explique la décision mieux qu’une étiquette comme « tablette ».

À retenir

• Écrivez d’abord les styles de base pour les petites largeurs, puis ajoutez les adaptations nécessaires.
• Déterminez un point de rupture en observant quand le contenu cesse d’être confortable.
• Testez la page juste avant et après chaque seuil, avec des contenus courts et longs.
• N’ajoutez pas de seuil sans problème concret à résoudre et gardez la raison du choix compréhensible.

Dans la prochaine leçon, vous appliquerez ces seuils pour adapter la grille et la navigation aux petits écrans.