Tool Hub

Calculatrice CSS clamp()

Police min/max · viewport → formule clamp() responsif

Preview viewport: 800px

The quick brown fox jumps over the lazy dog.

24.00px @ 800px

CSS
font-size: clamp(1.000rem, 1.6667vw + 0.6667rem, 2.000rem);

Comment utiliser

  1. Entrez la taille minimale de police en pixels et la taille maximale de police en pixels.
  2. Entrez la largeur minimale de la fenêtre et la largeur maximale de la fenêtre où ces tailles de police s'appliquent.
  3. Faites glisser le curseur d'aperçu pour simuler le redimensionnement de la police à différentes largeurs de fenêtre et lisez la valeur en pixels en direct.
  4. Copiez l'expression clamp() générée et collez-la dans votre CSS.

Exemples

  • Police minimale 16 px, police maximale 32 px, fenêtre minimale 320 px, fenêtre maximale 1280 px produit clamp(16px, 1.667vw + 10.667px, 32px).
  • Dans un aperçu de fenêtre de 800 px, l'affichage en direct montre approximativement 23 px, confirmant une mise à l'échelle en douceur entre les deux extrêmes.

Vérifiez les sorties avant utilisation en production. Aucune garantie — voir Conditions.