Créer une échelle fluide de dimensions

Une page peut sembler trop serrée sur un grand écran et trop encombrée sur un petit. Si vous corrigez chaque format avec une série de seuils et de règles ponctuelles, la feuille devient difficile à maintenir et les transitions restent souvent abruptes. Une échelle fluide vous permet de faire évoluer progressivement les espacements et les tailles de texte entre deux limites que vous choisissez.

Dans la leçon sur la cartographie, vous avez distingué les responsabilités des règles ; nous allons ici appliquer cette organisation à quelques valeurs communes de la page de l’atelier. Vous allez créer des variables qui restent stables sur les écrans étroits et larges, mais qui augmentent de façon continue entre les deux.

Faire varier une valeur avec la largeur

Les unités relatives au viewport permettent d’exprimer une dimension en fonction de la taille de la fenêtre. Par exemple, vw représente un pourcentage de sa largeur : 1vw correspond à un centième de cette largeur. Une valeur fondée uniquement sur vw peut toutefois devenir trop petite sur un téléphone ou excessive sur un écran très large ; elle ne constitue donc pas, à elle seule, une limite de conception.

Pour borner cette évolution, utilisez clamp(minimum, valeur-fluidе, maximum). Le navigateur retient au minimum la première valeur, au maximum la troisième, et utilise la valeur centrale tant qu’elle reste entre les deux. Ainsi, vous pouvez définir un espacement qui augmente avec la fenêtre sans jamais descendre sous une valeur confortable ni dépasser la place prévue pour le contenu.

:root {
    --espace-page: clamp(1rem, 0.5rem + 3vw, 3rem);
    --espace-section: clamp(2rem, 1rem + 4vw, 4.5rem);
    --texte-courant: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
    --titre-principal: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

.page-atelier {
    padding-inline: var(--espace-page);
}

.conseils {
    margin-block: var(--espace-section);
}

.conseils__texte {
    font-size: var(--texte-courant);
}

.entete-atelier__titre {
    font-size: var(--titre-principal);
}

Dans cet exemple, le retrait horizontal de la page et l’écart entre les sections grandissent progressivement. Le texte courant et le titre principal suivent le même principe, mais avec des bornes adaptées à leur rôle. Les variables portent des noms liés à l’intention : les composants utilisent une taille de texte ou un espacement, sans avoir à connaître la formule qui les produit.

Choisir des bornes utiles

Commencez par choisir le minimum et le maximum en fonction du contenu réel. Pour le titre de l’atelier, le minimum doit rester lisible sans occuper presque toute la hauteur d’un petit écran ; le maximum doit donner une hiérarchie nette sans déborder de l’en-tête. Pour les espacements, vérifiez que le minimum ne colle pas les blocs et que le maximum ne les éloigne pas au point de casser leur relation visuelle.

La valeur centrale combine ici une base fixe, en rem, et une part dépendante de la fenêtre, en vw. La base garantit un niveau minimal ; la part fluide apporte une progression. Les nombres proposés dans le code sont des points de départ : essayez-les sur le contenu de la page, puis ajustez-les en observant les états étroit et large. Si une valeur touche immédiatement une borne, sa partie fluide ne contribue pas à cette largeur, ce qui est le comportement attendu.

Construire une échelle cohérente

Une échelle ne signifie pas que chaque élément doit avoir sa propre formule. Définissez quelques rôles récurrents, par exemple le retrait de page, l’espace entre sections, le texte courant et le titre principal. Réutilisez ensuite ces valeurs dans les zones concernées : l’en-tête, les horaires, les conseils et le contact partageront une logique de dimensionnement plutôt qu’une collection de nombres isolés.

Pendant votre contrôle, vérifiez que le changement est progressif et que les extrêmes restent maîtrisés. Si le texte devient trop grand avant que la mise en page ait assez d’espace, réduisez la progression ou abaissez son maximum ; si les sections restent tassées sur les écrans moyens, augmentez la part fluide ou revoyez les bornes. Évitez de multiplier des seuils de largeur uniquement pour corriger une formule dont les limites sont mal choisies.

À retenir

• Les unités relatives au viewport font varier une dimension avec la largeur de la fenêtre.
• clamp() encadre une valeur fluide entre un minimum et un maximum.
• Définissez des variables par rôle pour partager une échelle lisible et maintenable.
• Ajustez les bornes sur le contenu réel de l’atelier et gardez fixes les espacements qui ne nécessitent pas de variation.

Dans la prochaine leçon, vous adapterez un composant à l’espace de son conteneur plutôt qu’à la seule largeur de la fenêtre.