Corso raccomandato:

Funzione CSS clamp()

Definizione e uso di CSS clamp() La funzione viene utilizzata per impostare un valore che si adatta automaticamente tra il valore minimo e il valore massimo in base alla dimensione della viewport.

clamp() La funzione ha tre parametri: valore minimo, valore preferito e valore massimo. Se il valore preferito si trova all'interno dell'intervallo specificato, il browser sceglierà il valore preferito; altrimenti, il browser sceglierà il valore minimo o massimo.

Esempio

Imposta la dimensione minima del carattere per l'elemento <h1> a 2rem e la dimensione massima a 3.5rem. Allo stesso tempo, imposta la dimensione minima del carattere per l'elemento <p> a 1rem e la dimensione massima a 2.5rem:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

Prova tu stesso

Sintassi CSS

clamp(min, preferred, max)

Dettagli tecnici

Supporto del browser

Tabella delle cifre indica la versione del browser che supporta completamente la funzione.