Calcolatore CSS clamp
Con questo calcolatore CSS clamp trasformi un valore minimo, uno massimo e un intervallo di viewport nell'espressione clamp() pronta per font, spaziature e larghezze, senza media query.
Esempio: Proprietà CSS: font-size · Valore minimo (mobile) 16 px · Valore massimo (desktop) 24 px · Dalla larghezza del viewport 320 px · Fino alla larghezza del viewport 1280 px · Dimensione del font di base (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Fonte: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Aggiornato al: .
Come si calcola
clamp(MIN, VAL, MAX) limita un valore dal basso e dall'alto. Per un testo che cresce da 16 a 24 px tra 320 px e 1280 px di larghezza, diventa: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).
Come si calcola
Tra le due larghezze di viewport il valore sale linearmente. La pendenza è (max − min) / (viewportmax − viewportmin), l'intercetta min − pendenza · viewportmin. L'intercetta è in rem e la pendenza in vw, così il font del browser ingrandito dall'utente continua a contare. La tabella mostra il valore sui dispositivi più comuni.
Da sapere
- I font solo in vw, senza parte in rem, si ingrandiscono a fatica con lo zoom; per questo l'espressione include una parte rem.
- clamp() funziona anche per padding, margin, gap e width, ovunque ci sia una lunghezza.
- Tutti i browser attuali supportano clamp() (dal 2020).
Domande frequenti
Come calcolo clamp() per le dimensioni del font?
Inserisci dimensione minima e massima in px e le larghezze di viewport. Il calcolatore compone il valore preferito con rem e vw e lo colloca tra minimo e massimo.
Perché l'espressione contiene una parte in rem?
Un valore solo in vw ignora la dimensione del font del browser. Con una parte in rem il testo continua a scalare per chi usa un font più grande.
Posso usare clamp() anche per le spaziature?
Sì, per ogni proprietà CSS con valore di lunghezza, come padding, margin, gap o width.
Che cosa significa 1.5rem alla fine?
Il massimo: oltre la larghezza superiore il testo smette di crescere. Con base 16 px, 1,5 rem sono esattamente 24 px.
Fonti e riferimenti normativi
- MDN – CSS clamp(): clamp(MIN, VAL, MAX)
- W3C – CSS Values and Units Module Level 4: Mathematical Expressions (min(), max(), clamp())
- W3C WCAG 2.2 – Success Criterion 1.4.4 Resize Text (il testo deve poter essere ingrandito fino al 200 %)
Aggiornato al: · Principi editoriali
Strumenti correlati
- Convertire px in remConvertire px in rem con la tua dimensione base, più em, pt, percentuale e vw, e una tabella delle dimensioni di carattere comuni. Gratis, senza registrazione.
- Generatore di gradienti CSSCrea gradienti CSS lineari, radiali o conici con tutti i punti colore che vuoi, angolo e colore di riserva: anteprima dal vivo e codice CSS pronto da copiare.
- Generatore di box-shadow CSSCrea ombre CSS con i cursori: livelli, spostamento, sfocatura, estensione, colore trasparente, inset e modelli – anteprima dal vivo, CSS pronto da copiare.
- Generatore di border-radius CSSArrotonda gli angoli con gli slider: tutti insieme o uno per uno, in px o %, sintassi ellittica a 8 valori – CSS più breve, anteprima live, pulsante copia.
- Abbinamento font: coppie per titoli e testoCoppie di font per titoli e testo con anteprima live, CSS pronto da copiare e disponibilità su Windows, Mac, iPhone e Android – solo font di sistema.
- Verifica del contrasto dei colori (WCAG 2.2)Verifica il contrasto tra colore del testo e dello sfondo: rapporto di contrasto WCAG 2.2 con esito AA/AAA per testo normale, testo grande e componenti UI.
- Qual è il mio indirizzo IP?Mostra subito il tuo indirizzo IP pubblico, rileva IPv4 o IPv6 e spiega la differenza. Gratis, senza registrazione – il tuo IP non viene mai salvato.
- Generatore cron: creare e spiegare un’espressione cronGeneratore cron e spiegazione: costruisci o incolla un’espressione, leggila in parole semplici e vedi le prossime esecuzioni. Unix, Spring e Quartz, in locale.
- Calcolo delle dimensioni dello schermoCalcolo delle dimensioni dello schermo: larghezza e altezza in cm e pollici da diagonale e formato, con densità di pixel (ppi) e distanza di nitidezza.