7.1 Fonction min()
La fonction min() renvoie la plus petite valeur d'une liste d'arguments. Elle est utile pour fixer des valeurs qui ne dépassent pas une certaine limite.
Syntaxe :
sélecteur {
propriété: min(value1, value2 ...);
}
Exemple d'utilisation :
Dans cet exemple, la largeur du bloc ne sera pas supérieure à 300 pixels, mais si 100% de l'élément parent est inférieur à 300 pixels, la valeur de 100% sera utilisée :
/* Largeur du bloc pas plus de 300px, mais au moins 100px */
.block {
width: min(300px, 100%);
}
Exemple 2 : Limitation de la taille de police
Dans cet exemple, la taille de police ne dépassera pas 2em, mais si 5% de la largeur de la fenêtre est moindre, cette valeur sera utilisée :
.text {
font-size: min(2em, 5vw);
}
7.2 Fonction max()
La fonction max() renvoie la plus grande valeur d'une liste d'arguments. Elle est utile pour fixer des valeurs qui ne descendent pas en dessous d'une certaine limite.
Syntaxe :
sélecteur {
propriété: max(value1, value2, ...);
}
Exemple d'utilisation
Dans cet exemple, la largeur du bloc ne sera pas inférieure à 200 pixels, mais si 50% de la largeur de l'élément parent est supérieur à 200 pixels, la valeur de 50% sera utilisée :
/* Largeur du bloc pas moins de 200px, mais peut être plus */
.block {
width: max(200px, 50%);
}
Exemple 2 : Taille de police minimale
Dans cet exemple, la taille de police ne sera pas inférieure à 1.5em, mais si 2% de la largeur de la fenêtre est supérieure, cette valeur sera utilisée :
.title {
font-size: max(1.5em, 2vw);
}
7.3 Fonction clamp()
La fonction clamp() renvoie une valeur limitée par des valeurs minimales et maximales. Elle prend trois arguments : une valeur minimale, une valeur préférée et une valeur maximale.
Syntaxe :
sélecteur {
propriété: clamp(min, expression, max);
}
Exemple d'utilisation
Dans cet exemple, la taille de police variera en fonction de la largeur de la fenêtre de visualisation : minimalement 12 pixels, maximalement 24 pixels, et la valeur préférée sera de 2% de la largeur de la fenêtre :
/* Taille de police de 12px à 24px, selon la largeur de l'écran */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Exemple 2 : Limitation de la largeur du bloc
Dans cet exemple, la largeur du bloc variera en fonction de la largeur de l'élément parent, mais pas moins de 200 pixels et pas plus de 600 pixels :
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Exemple de mise en œuvre complète
.container {
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
}
.box {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
width: clamp(200px, 50%, 600px);
}
.text {
font-size: clamp(1em, 2vw, 2em);
}
.sidebar {
background-color: #2ecc71;
color: white;
padding: 10px;
text-align: center;
width: max(200px, 30%);
}
.text-small {
font-size: min(2em, 5vw);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple d'utilisation des fonctions min(), max() et clamp()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Largeur : clamp(200px, 50%, 600px)</div>
<p class="text">Taille de police : clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Largeur : max(200px, 30%)</div>
<p class="text-small">Taille de police : min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION