Fonction clamp

La fonction clamp prend trois paramètres : la valeur minimale, la valeur préférée et la valeur maximale. Elle retourne :

• la valeur minimale si la valeur préférée est inférieure à la minimale
• la valeur maximale si la valeur préférée est supérieure à la maximale
• la valeur préférée si elle se situe entre la minimale et la maximale

Syntaxe

csssélecteur {
  propriété: clamp(min, pref, max);
}

Exemple . Limitation de la taille d'un bloc

Dans l'exemple suivant, la taille préférée du bloc sera de 30% de la largeur de l'écran. Mais elle ne pourra pas devenir inférieure à 100px ni supérieure à 300px :

html<div id="con1"></div>
<div id="targ"></div>
<div id="con2"></div>

css#targ {
  width: clamp(100px, 30%, 300px);
  height: 100px;
  border: 1px solid red;
  margin: 30px auto;
}
#con1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 30px auto;
}
#con2 {
  width: 300px;
  height: 100px;
  border: 1px solid black;
  margin: 30px auto;
}

Результат:

Exemple . Taille de police adaptative

Dans l'exemple suivant, la taille de police préférée sera de 4vw. Mais elle ne pourra pas devenir inférieure à 16px ni supérieure à 32px :

html<p id="con1">
  responsive text example
</p>
<p id="elem">
  responsive text example
</p>
<p id="con2">
  responsive text example
</p>

css#elem {
  font-size: clamp(16px, 4vw, 32px);
  color: red;
}
#con1 {
  font-size: 16px;
}
#con2 {
  font-size: 32px;
}

Результат:

Exemple . Rayon de bordure adaptatif

Dans l'exemple suivant, le rayon de bordure préféré sera de 3vw. Mais il ne pourra pas devenir inférieur à 5px ni supérieur à 20px :

html<div id="con1"></div>
<div id="elem"></div>
<div id="con2"></div>

cssdiv {
  width: 100px;
  height: 100px;
  margin: 20px auto;
  background: lightblue;
}
#elem {
  border-radius: clamp(5px, 3vw, 20px);
  background: #efafc6;
}
#con1 {
  border-radius: 5px;
}
#con2 {
  border-radius: 20px;
}

Результат:

Voir aussi