Faites glisser un curseur de largeur de viewport et voyez calc(), min(), max() et clamp() se résoudre en pixels. Plus vh face à svh, lvh et dvh, fit-content et min-content en direct, gap, et des recettes de typographie fluide.
Les fonctions mathématiques CSS permettent à une valeur de s'adapter à l'écran. calc() mélange les unités, comme dans calc(100% - 2rem). min() retient la plus petite option, donc width: min(100%, 640px) ne déborde jamais. max() retient la plus grande, et clamp(min, preferred, max) maintient une valeur fluide entre deux limites. dvh suit la barre d'outils changeante du navigateur mobile, contrairement à vh.
Quelle fonction pour quel usage
Usage
CSS
Pleine largeur moins une gouttière fixe
width: calc(100% - 2rem)
Une colonne plafonnée à 640px
width: min(100%, 640px)
Un padding qui ne descend jamais sous 1rem
padding: max(1rem, 4vw)
Un titre qui varie entre 2rem et 3.5rem
font-size: clamp(2rem,1.2rem + 3vw,3.5rem)
Un hero qui remplit l'écran mobile visible
min-height: 100dvh
Au lieu de redimensionner votre navigateur pour tester une formule, faites glisser la largeur de viewport simulée et chaque fonction se résout en pixels sous vos yeux, avec le point où clamp() atteint ses limites. La page montre aussi ce que mesurent vh, svh, lvh et dvh sur un téléphone, et les mots-clés intrinsèques à l'œuvre sur de vraies boîtes.
Faites glisser le curseur de largeur du viewport, d'une taille de téléphone jusqu'à un grand écran.
Ajustez les valeurs minimale, préférée et maximale de la formule clamp() et observez son résultat en pixels.
Comparez les lignes min(), max() et calc() résolues à la même largeur.
Copiez la formule, puis essayez les boîtes de dimensionnement selon le contenu et les exemples de gap ci-dessous.
Les espaces autour de + et - dans calc() sont obligatoires. calc(100%-2rem) est invalide ; calc(100% - 2rem) fonctionne.
Gardez un terme en rem au milieu d'un clamp() de police fluide, pour que le texte réagisse toujours quand le lecteur zoome ou change la taille par défaut.
min() et max() semblent inversés au début : min() fixe une taille maximale, car elle prend toujours la plus petite valeur.
Utilisez dvh avec parcimonie pour les sections plein écran, car sa valeur change quand la barre d'outils bouge et peut décaler le contenu pendant le défilement. svh est le choix stable.
Questions fréquentes
Quelle est la différence entre vh, svh, lvh et dvh ?
Sur téléphone, la barre d'outils du navigateur s'agrandit et se réduit. svh vaut 1% du petit viewport, barre d'outils affichée. lvh vaut 1% du grand viewport, barre masquée. dvh suit celui qui est actif et se met à jour pendant le défilement. Le vh classique équivaut généralement à lvh, c'est pourquoi les sections en 100vh sont coupées sur mobile.
clamp(), min() et max() sont-elles prises en charge partout ?
Oui, les trois fonctionnent dans tous les grands navigateurs depuis 2020. Les unités de viewport petit, grand et dynamique sont arrivées plus tard, en 2022, et sont désormais présentes dans tous les grands navigateurs actuels. Ajoutez une ligne de repli en vh simple avant elles si vous prenez encore en charge des appareils plus anciens.
Comment écrire une taille de police fluide avec clamp() ?
Choisissez la taille sur un écran étroit et sur un écran large, puis écrivez clamp(small, preferred, large). La valeur préférée combine rem et vw, par exemple 1rem + 2vw, pour que la taille grandisse avec la fenêtre tout en restant entre les deux limites. Le labo ci-dessous montre les largeurs exactes où les limites prennent le relais.
Que fait fit-content ?
width: fit-content dimensionne une boîte selon son contenu, comme un inline-block ajusté, mais jamais plus large que l'espace disponible. Cela équivaut à min(max-content, max(min-content, available space)). La fonction fit-content() dans les pistes de grid fait la même chose avec une limite que vous choisissez.
Peut-on utiliser gap avec flexbox ?
Oui. gap, row-gap et column-gap fonctionnent dans les conteneurs flex de tous les navigateurs actuels, pas seulement en grid. L'espacement n'est ajouté qu'entre les éléments, jamais sur les bords extérieurs, ce qui est plus simple que des marges sur chaque enfant.
Comment calc() se résout
calc() attend le moment de la mise en page pour se résoudre, ce qui lui permet de combiner un pourcentage dépendant du parent avec une valeur en rem ou en pixels. Vous pouvez imbriquer calc() dans min(), max() et clamp() et y utiliser des propriétés personnalisées, comme calc(var(--gutter) * 2).
La multiplication et la division exigent au moins un nombre simple : calc(2 * 1rem) est correct, calc(1rem * 1rem) ne l'est pas. Une division par zéro rend la déclaration invalide.
Tailles intrinsèques : min-content, max-content et fit-content
min-content est la largeur la plus étroite qu'une boîte peut prendre sans déborder, généralement celle de son mot le plus long ou de son image la plus large. max-content est la largeur qu'elle prendrait si le texte ne revenait jamais à la ligne. Les deux sont utiles pour les pistes de grid et pour les libellés qui doivent épouser leur texte.
fit-content se situe entre les deux : aussi large que le contenu le souhaite, mais avec retour à la ligne quand le conteneur est plus étroit. C'est donc une façon propre de centrer une boîte ajustée avec margin-inline: auto.
Un espacement fluide en plus d'une typographie fluide
La même astuce clamp() fonctionne pour le padding, les marges et les espacements. Une section avec padding-block: clamp(2rem, 6vw, 6rem) respire sur grand écran sans gaspiller d'espace sur un téléphone.
Définissez les valeurs fluides une seule fois en propriétés personnalisées, par exemple --space-m et --step-2, et utilisez-les partout. Changer l'échelle plus tard revient alors à modifier une ligne plutôt qu'à fouiller dans tous les composants.
vh face à svh, lvh et dvh
Unités en pourcentage du viewport
Unité
1 unité vaut
Change au défilement ?
À utiliser pour
vh / vw
1% du viewport (sur mobile, généralement le grand)
Non
Mises en page desktop, repli pour anciens navigateurs
svh / svw
1% du petit viewport, barres d'outils affichées
Non
Sections plein écran qui ne doivent jamais être masquées
lvh / lvw
1% du grand viewport, barres d'outils masquées
Non
Arrière-plans qui doivent tout couvrir
dvh / dvw
1% du viewport actuel
Oui
Mises en page qui doivent suivre la barre d'outils
vmin / vmax
1% du plus petit ou du plus grand côté
Non
Éléments carrés adaptés aux deux orientations
cqi / cqw
1% de la taille inline d'un conteneur de taille
Avec le conteneur
Composants dans des container queries
Un hero pleine hauteur sûr sur mobile
La première ligne sert de repli pour les navigateurs sans les nouvelles unités. La seconde la remplace là où elles sont prises en charge.
Exemples de calc(), min(), max() et clamp()
Une colonne lisible sans media query
min() plafonne la largeur ; le padding utilise max() pour ne jamais descendre sous 12px. Les deux règles s'adaptent seules à la largeur du cadre.
calc() pour une barre latérale fixe à côté d'une zone principale fluide
La zone principale prend tout ce qui reste après la barre latérale de 120px et l'espacement de 12px.
min-content, max-content et fit-content
Mots-clés de dimensionnement intrinsèque
Mot-clé
La largeur devient
Tailwind
Le mot insécable le plus long ou l'image la plus large
Tout le contenu sur une ligne, même s'il déborde
max-content, mais pas plus large que l'espace disponible
fit-content(300px) en grid
Comme fit-content avec un plafond de 300px
grid-cols-[fit-content(300px)_1fr]
gap en flex et en grid
Le même gap dans une rangée flex qui passe à la ligne et dans une grid
row-gap et column-gap peuvent différer. Aucun des deux n'ajoute d'espace sur les bords extérieurs.
Échelle fluide de typographie et d'espacement
Une petite échelle fluide en propriétés personnalisées
Chaque palier grandit entre un téléphone d'environ 360px et un écran de bureau de 1280px. Ajustez les valeurs dans le labo ci-dessus.
Labo du viewport
Largeur de viewport simulée (px)
Titre fluide à {px}px
Valeurs résolues à la largeur simulée
Fonction
Déclaration
À {vp}px
minimum de clamp (rem)
maximum de clamp (rem)
préférée : partie rem
préférée : partie vw
Le maximum est inférieur au minimum, donc le minimum l'emporte à toutes les largeurs.
Reste à {min}rem jusqu'à environ {from}px de large, grandit jusqu'à environ {to}px, puis se maintient à {max}rem.
Sans partie vw, la valeur ne change jamais avec la fenêtre.
Copier
Ce que couvrent 100 unités de chaque type sur un téléphone
Trois téléphones : 100svh remplit l'espace entre les barres d'outils visibles, 100lvh remplit tout l'écran comme si les barres étaient masquées, 100dvh suit les barres d'outils quand elles changent
barres affichées
barres masquées
suit les barres
Les bandes grises sont les barres d'outils du navigateur. Le bleu est la zone que remplissent 100 unités.
Dimensionnement selon le contenu, en direct
Mot-clé de largeur
Espace disponible (px)
Livraison gratuite sur toutes les commandes ce week-end