CSS Fonctions Mathématiques
Fonctions Mathématiques CSS
Les fonctions mathématiques CSS permettent d'utiliser des expressions mathématiques comme valeurs de propriété.
Dans ce chapitre, nous allons expliquer les fonctions mathématiques suivantes :
-
calc() -
max() -
min() -
clamp()
La Fonction CSS calc()
La calc() effectue un calcul mathématique qui sera utilisé comme valeur de propriété.
La fonction calc() prend en charge l'addition (+), la soustraction (-), la multiplication (*) et la division (/), et peut combiner différentes unités, comme les pixels et les pourcentages.
Syntaxe CSS
calc( expression ) | Valeur | Description |
|---|---|
| expression | Requis. Une expression mathématique. Le résultat sera utilisé comme valeur. |
Regardons un exemple :
Exemple
Utilisez calc() pour calculer la largeur et la hauteur d'un élément <div> :
#div1 {
margin: auto;
width: calc(100% - 100px);
height: calc(30vh + 50px);
border: 1px solid black;
padding: 10px;
} La Fonction CSS max()
La max() prend une liste de valeurs séparées par des virgules et utilise la plus grande valeur de la liste comme valeur de propriété.
Syntaxe CSS
max( value1 , value2 , ...) | Valeur | Description |
|---|---|
| value1 , value2 , ... | Requis. Une liste de valeurs séparées par des virgules. |
Regardons un exemple :
Exemple
Utilisez max() pour définir la largeur de #div1 à la valeur la plus grande, soit 50% soit 300px :
#div1 {
height: 100px;
width: max(50%, 300px);
border: 1px solid black;
padding: 10px;
} La Fonction CSS min()
La min() prend une liste de valeurs séparées par des virgules et utilise la plus petite valeur de la liste comme valeur de propriété.
Syntaxe CSS
min( value1 , value2 , ...) | Valeur | Description |
|---|---|
| value1 , value2 , ... | Requis. Une liste de valeurs séparées par des virgules. |
Regardons un exemple :
Exemple
Utilisez min() pour définir la largeur de #div1 à la valeur la plus petite, soit 50% soit 300px :
#div1 {
height: 100px;
width: min(50%, 300px);
border: 1px solid black;
padding: 10px;
} La Fonction CSS clamp()
La clamp() est utilisée pour définir une valeur qui s'ajustera de manière réactive entre une valeur minimale et une valeur maximale en fonction de la taille de la fenêtre d'affichage.
La fonction clamp() a trois paramètres : une valeur minimale, une valeur préférée et une valeur maximale. Si la valeur préférée est inférieure à la valeur minimale ou supérieure à la valeur maximale, la valeur préférée est utilisée.
Syntaxe CSS
clamp( min , preferred , max ) | Valeur | Description |
|---|---|
| min | Optionnel. Spécifie la plus petite valeur autorisée. |
| preferred | Requis. Spécifie la valeur préférée. |
| max | Optionnel. Spécifie la plus grande valeur autorisée. |
Regardons un exemple :
Exemple
Définissez la taille de police minimale de l'élément <h2> à 2rem et la taille de police maximale à 3.5rem. De plus, définissez la taille de police minimale de l'élément <p> à 1rem et la taille de police maximale à 2.5rem :
h2 {
font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
font-size: clamp(1rem, 2.5vw, 2.5rem);
} Référence des Fonctions CSS
Pour une liste complète de toutes les fonctions CSS, visitez notre Référence des Fonctions CSS .