Choisir les viewports min et max

Une équipe livre un hero fluide avec le glissement réglé de 320px à 1920px — toute la gamme d’écrans qu’elle pouvait imaginer. Le conteneur de sa mise en page plafonne à 1200px. Sur chaque viewport plus large que ça, les colonnes restent immobiles tandis que le texte continue de grandir : un titre d’affichage en 3.157rem qui s’affiche à ≈53,9px quand le conteneur cesse de s’élargir a grimpé à ≈56,8px à 1920px, dans des colonnes qui n’ont pas gagné un seul pixel. Le texte déborde de sa propre mise en page — moins de caractères tiennent sur chaque ligne, et rien d’autre sur la page n’explique pourquoi.

La plage de viewport doit couvrir là où votre mise en page vit réellement : réglez vp-min sur le plus petit écran réel que vous servez — souvent 360–390px — et vp-max là où votre mise en page cesse de grandir, généralement la max-width du conteneur. En dehors de la plage, le clamp maintient son minimum ou son maximum à plat, ce qui est le comportement correct, pas un défaut. Les deux extrémités sont les nombres les moins discutés de la formule fluide, et elles contrôlent tout ce que fait la pente. Cet article fait partie de notre guide de la typographie fluide.

Où le glissement doit-il commencer ?

Au plus petit viewport que votre audience utilise vraiment — pour la plupart des produits aujourd’hui, un téléphone de 360–390px. Régler vp-min plus bas (320px est le réflexe traditionnel) n’est pas dangereux, mais ça dépense une partie de votre glissement sur des largeurs qui n’apparaissent presque plus dans les analytics : la pente s’aplatit pour les couvrir, et les largeurs que les gens tiennent réellement en main reçoivent moins du changement. Le minimum du clamp protège déjà tout ce qui est plus étroit — un viewport de 300px reçoit simplement la plus petite taille.

L’extrémité est une propriété de votre mise en page et de votre trafic, pas d’un quelconque catalogue d’appareils — le piège du modèle d’appareil qui a miné le choix des points de rupture s’applique tel quel aux extrémités fluides.

Où le glissement doit-il s’arrêter ?

Là où la mise en page cesse de grandir. Beaucoup de mises en page plafonnent la largeur de leur contenu avec une max-width de conteneur — au-delà, le viewport supplémentaire devient de la marge, et la mesure (caractères par ligne) est figée. Si le texte continue de glisser passé ce point, la taille grandit contre une longueur de ligne fixe, ce qui est exactement l’échec du début : du texte qui déborde de ses colonnes. D’où une convention de travail propre : vp-max = la max-width du conteneur. Le texte et la mise en page cessent alors de changer à la même largeur, et la composition qui était juste à 1279px l’est toujours à 2560px, simplement centrée dans plus de marge.

Si votre conteneur plafonne à 1200px, glissez jusqu’à 1200. Si votre mise en page est véritablement pleine largeur — pas de plafond, des colonnes fluides jusqu’en haut — un vp-max plus large se défend, car la longueur de ligne continue de grandir en même temps que le texte. La convention n’est pas une loi ; c’est un accord entre deux systèmes sur l’endroit où « grand » se termine.

Que se passe-t-il en dehors de la plage de viewport ?

Le clamp reste plat : en dessous de vp-min, chaque taille se pose sur son minimum ; au-dessus de vp-max, sur son maximum. C’est le comportement voulu, et ça vaut la peine de le dire clairement, car ça ressemble à un bug la première fois que vous redimensionnez au-delà d’une extrémité et que rien ne bouge. Un moniteur ultra-large reçoit vos tailles maximales — la plus grande composition que vous avez conçue — pas une extrapolation de la pente à l’échelle d’une affiche. Un pliable de 280px reçoit votre minimum, pas du texte qui s’effondre vers zéro. La plage est une promesse sur l’endroit où l’interpolation se produit ; les extrémités sont des promesses sur ce qui se passe partout ailleurs.

Dans quelle mesure la plage change-t-elle la pente ?

Plus que ne le fait l’une ou l’autre des tailles de base. La pente, c’est la croissance divisée par la plage. Chaque unité vw vaut 1% de la largeur du viewport (unités de viewport), donc une plage étroite concentre la même croissance dans moins de pour-cent. Voici la même paire 16→18px à travers trois plages :

Les trois se vérifient à leurs extrémités : 15,22 + 0,2174 × 3,6 ≈ 16 et 15,22 + 0,2174 × 12,8 ≈ 18 ; 15,6 + 0,125 × 3,2 = 16 et 15,6 + 0,125 × 19,2 = 18 exactement ; 14,24 + 0,4902 × 3,6 ≈ 16 et 14,24 + 0,4902 × 7,68 ≈ 18. Les deux mêmes tailles de base, trois comportements complètement différents — la plage est là où se fixe le caractère d’un système fluide. Vous pouvez sentir la différence directement : ouvrez les contrôles de plage de viewport et tirez vp-max vers l’intérieur — le glissement de l’échelle se raidit visiblement tandis que les tailles aux extrémités restent en place.

Le glissement doit-il s’aligner sur les points de rupture de la grille de mise en page ?

Ce sont des systèmes indépendants — la typographie fluide n’a pas de points de rupture propres. La grille de mise en page continue de faire progresser ses colonnes par paliers, quoi que fasse le texte. Mais indépendant ne veut pas dire sans rapport : les deux devraient s’accorder aux bords. vp-max aligné sur le plafond du conteneur est un de ces accords ; un autre consiste à vérifier le texte aux largeurs où les colonnes changent, car un saut de colonne change la longueur de ligne, et la longueur de ligne est le contexte dans lequel vivent vos tailles glissantes. Le glissement n’a pas besoin de connaître vos points de rupture — il a besoin de s’arrêter là où s’arrête la croissance de la mise en page.

Testez vos extrémités

Les extrémités sont bon marché à tester et coûteuses à deviner : chargez la même paire 16→18 sur la plage étroite 360→768 et faites glisser l’aperçu à travers les deux bords — regardez le glissement se terminer tôt et rester plat au-dessus de 768px. Puis réglez vp-max sur le plafond de votre propre conteneur et vérifiez le sommet de votre échelle exactement à cette largeur. Si le plus grand titre paraît juste là où les colonnes cessent de grandir, votre plage fait son unique travail : couvrir là où vit la mise en page, et nulle part ailleurs.