Calcolatore CSS clamp()

Si definiscono due punti di riferimento: una dimensione per uno schermo piccolo e una per uno schermo grande. Il calcolatore traccia una linea retta tra questi punti in modo che la dimensione cresca in modo fluido con l'allargarsi dello schermo, per poi racchiuderla in una funzione clamp() per evitare che scenda sotto il minimo o superi il massimo impostati. Tra le due larghezze la dimensione si adatta fluidamente; al di fuori, rimane fissa al limite più vicino.

I limiti sono espressi in rem e la parte centrale variabile mantiene una componente in rem, in modo che il testo continui a ingrandirsi se l'utente aumenta lo zoom o la dimensione predefinita dei caratteri nel browser (cosa che i valori espressi solo in pixel o viewport impedirebbero). Le dimensioni vengono inserite in pixel per comodità e lo strumento le converte in rem in base alla dimensione del font radice.

Sì. Lo stesso valore funziona per padding, margin, gap, width o height — ovunque sia ammessa una dimensione. Può impostare l'anteprima su Box per osservare la variazione dello spazio anziché del testo. Se le dimensioni minima e massima coincidono, il risultato si riduce a una semplice lunghezza fissa, poiché non vi è nulla da scalare.

Sì, tutti i browser moderni supportano clamp() dal 2020, quindi può utilizzare il valore direttamente senza fallback. In caso di valori massimi molto elevati o di variazioni repentine, si consiglia una rapida verifica con zoom al 200% per assicurarsi che il testo rimanga leggibile per chi ne ha bisogno.