Recommandation de cours :

Fonction CSS clamp()

Définition et utilisation de CSS clamp() La fonction est utilisée pour définir une valeur qui s'ajuste automatiquement entre la valeur minimale et la valeur maximale en fonction de la taille de la viewport.

clamp() La fonction clamp() prend trois paramètres : la valeur minimale, la valeur préférée et la valeur maximale. Si la valeur préférée est dans l'intervalle spécifié, le navigateur choisira la valeur préférée ; sinon, le navigateur choisira la valeur minimale ou maximale.

Exemple

Définissez la taille de police minimale de l'élément <h1> à 2rem et la taille de police maximale à 3.5rem. En même temps, définissez la taille de police minimale de l'élément <p> à 1rem et la taille de police maximale à 2.5rem :

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Essayez-le vous-même

Syntaxe CSS

clamp(min, preferred, max)

Détails techniques

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge complètement cette fonction pour la première fois.