Calculateur CSS clamp()
Donnez une taille pour un petit viewport et une pour un grand. Vous obtenez le clamp() qui passe de l'un à l'autre en douceur, en rem, pour continuer à respecter la taille de police du lecteur.
Portez ce vieux whisky
Échelle typographique
Pourquoi rem et non px
Une taille en px ignore la taille de police que le lecteur a choisie dans son navigateur. La même déclaration en rem s'y adapte : quelqu'un qui a réglé sa taille par défaut sur 20 px obtient un texte plus grand au lieu de vos 16 px figés. Le terme lié au viewport, lui, reste en vw dans tous les cas — il relève de la largeur de l'écran, pas des préférences du lecteur.
FAQ
À quoi sert le terme du milieu ?
C'est une droite passant par vos deux points : une ordonnée à l'origine plus une pente en vw. En dessous du petit viewport, la valeur est bloquée au minimum ; au-dessus du grand, au maximum.
Le maximum peut-il être plus petit que le minimum ?
Oui, et clamp() fonctionne toujours — mais le résultat rétrécit quand l'écran grandit, ce qui n'est presque jamais voulu. La page le signale le cas échéant.
Des données sont-elles envoyées à vos serveurs ?
Non. C'est de l'arithmétique dans votre navigateur ; rien de ce que vous tapez ne quitte la page.
Réalisé par l'équipe GO AI. Tous les outils gratuits