Calculateur CSS clamp
Avec ce calculateur CSS clamp, vous transformez une valeur minimale, une valeur maximale et une plage de viewport en expression clamp() prête pour polices, espacements et largeurs, sans media queries.
Exemple : Propriété CSS: font-size · Plus petite valeur (mobile) 16 px · Plus grande valeur (bureau) 24 px · À partir de la largeur de viewport 320 px · Jusqu'à la largeur de viewport 1 280 px · Taille de police de base (rem) 16 px → CSS : font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Source : MDN – CSS clamp(): clamp(MIN, VAL, MAX). Mise à jour : .
Comment le calcul est fait
clamp(MIN, VAL, MAX) borne une valeur par le bas et par le haut. Pour un texte qui passe de 16 à 24 px entre 320 px et 1280 px de largeur, cela donne : clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Comment le calcul est fait
Entre les deux largeurs de viewport, la valeur augmente linéairement. La pente est (max − min) / (viewportmax − viewportmin), l'ordonnée à l'origine min − pente · viewportmin. L'ordonnée est en rem et la pente en vw : une taille de police agrandie par l'utilisateur reste prise en compte. Le tableau montre la valeur obtenue sur des appareils courants.
Bon à savoir
- Des tailles de police uniquement en vw, sans partie rem, se zooment à peine ; d'où la partie rem dans l'expression.
- clamp() fonctionne aussi pour padding, margin, gap et width – partout où une longueur est permise.
- Tous les navigateurs actuels prennent en charge clamp() (depuis 2020).
Questions fréquentes
Comment calculer clamp() pour les tailles de police ?
Saisissez les tailles minimale et maximale en px et les largeurs de viewport. Le calculateur compose la valeur préférée en rem et vw et l'encadre entre minimum et maximum.
Pourquoi l'expression contient-elle une partie rem ?
Une valeur en vw seule ignore la taille de police du navigateur. Avec une partie rem, le texte reste adaptable pour qui agrandit sa police par défaut.
Puis-je utiliser clamp() pour les espacements ?
Oui, pour toute propriété CSS qui prend une longueur : padding, margin, gap ou width.
Que signifie 1.5rem à la fin ?
Le maximum : au-delà de la largeur haute, le texte cesse de grandir. Avec une base de 16 px, 1,5 rem font exactement 24 px.
Sources et références juridiques
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (le texte doit pouvoir être agrandi jusqu’à 200 %)
Dernière mise à jour : · Principes éditoriaux
Outils similaires
- Convertir px en remConvertir px en rem avec votre propre taille de base, plus em, pt, pourcentage et vw, et un tableau des tailles de police courantes. Gratuit, sans inscription.
- Générateur de dégradé CSSCréez des dégradés CSS : linéaires, radiaux ou coniques, autant d’arrêts de couleur que voulu, angle et couleur de repli – aperçu en direct et CSS à copier.
- Générateur de box-shadow CSSCréez des ombres CSS au curseur : plusieurs ombres, décalage, flou, étendue, couleur avec transparence, inset et modèles – aperçu en direct et CSS à copier.
- Générateur de border-radius CSSArrondissez les coins au curseur : tous liés ou un par un, en px ou %, elliptiques à 8 valeurs – écriture CSS la plus courte, aperçu en direct, CSS à copier.
- Association de polices : duos pour titres et texte courantDuos de polices pour titres et texte courant avec aperçu en direct, CSS à copier et disponibilité sur Windows, Mac, iPhone et Android – sans police web.
- Vérificateur de contraste des couleurs selon les WCAG 2.2Vérifiez le contraste entre couleur de texte et couleur de fond : ratio WCAG 2.2, niveaux AA/AAA pour texte normal, grand texte et composants d’interface.
- Quelle est mon adresse IP ?Affiche instantanément votre adresse IP publique, détecte IPv4 ou IPv6 et explique la différence. Gratuit – votre IP n’est pas stockée.
- JSON escape / unescapeJSON escape et unescape en ligne : transformez un texte en chaîne JSON valide (guillemets, barres obliques inverses et sauts de ligne échappés) ou l’inverse.
- Générateur JSON-LDGénérateur JSON-LD pour Schema.org : remplissez article, FAQ, produit, commerce local ou organisation et copiez le code prêt à l’emploi avec contrôle d’erreurs.