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
sé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 :
<div id="con1"></div>
<div id="targ"></div>
<div id="con2"></div>
#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 :
<p id="con1">
responsive text example
</p>
<p id="elem">
responsive text example
</p>
<p id="con2">
responsive text example
</p>
#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 :
<div id="con1"></div>
<div id="elem"></div>
<div id="con2"></div>
div {
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;
}
:
