7.1 Funzione min()
La funzione min() restituisce il valore più piccolo dalla lista degli argomenti. È utile per stabilire valori che non superano un certo limite.
Sintassi:
selettore {
proprietà: min(valore1, valore2 ...);
}
Esempio di utilizzo:
In questo esempio la larghezza del blocco non sarà maggiore di 300 pixel, ma se il 100% dell'elemento genitore è minore di 300 pixel, verrà utilizzato il valore 100%:
/* La larghezza del blocco non supera i 300px, ma non è inferiore ai 100px */
.block {
width: min(300px, 100%);
}
Esempio 2: Limitazione della dimensione del font
In questo esempio, la dimensione del font non sarà maggiore di 2em, ma se 5% della larghezza della finestra di visualizzazione è minore, verrà utilizzato questo valore:
.text {
font-size: min(2em, 5vw);
}
7.2 Funzione max()
La funzione max() restituisce il valore più grande dalla lista degli argomenti. È utile per stabilire valori che non scendono sotto un certo limite.
Sintassi:
selettore {
proprietà: max(valore1, valore2, ...);
}
Esempio di utilizzo
In questo esempio la larghezza del blocco non sarà inferiore a 200 pixel, ma se il 50% della larghezza dell'elemento genitore è maggiore di 200 pixel, verrà utilizzato il valore 50%:
/* La larghezza del blocco non è inferiore a 200px, ma può essere maggiore */
.block {
width: max(200px, 50%);
}
Esempio 2: Dimensione minima del font
In questo esempio la dimensione del font non sarà inferiore a 1.5em, ma se 2% della larghezza della finestra di visualizzazione è maggiore, verrà utilizzato questo valore:
.title {
font-size: max(1.5em, 2vw);
}
7.3 Funzione clamp()
La funzione clamp() restituisce un valore limitato dai valori minimo e massimo. Prende tre argomenti: valore minimo, valore preferito e valore massimo.
Sintassi:
selettore {
proprietà: clamp(min, espressione, max);
}
Esempio di utilizzo
In questo esempio la dimensione del font cambierà in base alla larghezza della finestra di visualizzazione: minima 12 pixel, massima 24 pixel, e il valore preferito è il 2% della larghezza della finestra:
/* Font dimensioni da 12px a 24px, a seconda della larghezza dello schermo */
.text {
font-size: clamp(12px, 2vw, 24px);
}
Esempio 2: Limitazione della larghezza del blocco
In questo esempio la larghezza del blocco cambierà a seconda della larghezza dell'elemento genitore, ma non meno di 200 pixel e non più di 600 pixel:
.box {
width: clamp(200px, 50%, 600px);
}
7.4 Esempio di implementazione completa
.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>Esempio di utilizzo delle funzioni min(), max() e clamp()</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="box">Larghezza: clamp(200px, 50%, 600px)</div>
<p class="text">Dimensione del font: clamp(1em, 2vw, 2em)</p>
<div class="sidebar">Larghezza: max(200px, 30%)</div>
<p class="text-small">Dimensione del font: min(2em, 5vw)</p>
</div>
</body>
</html>
GO TO FULL VERSION