Calcolo delle dimensioni fluide
Fluid Size Calculator
Calcola l’espressione clamp() che fa variare una dimensione con continuità fra due larghezze di viewport.
Costruisce un `clamp()` che fa scalare una dimensione in modo continuo fra due larghezze di viewport — l’espressione della tipografia fluida, con i conti già fatti. I due estremi sono in `rem`, ed è questa la parte che decide se il risultato è accessibile.
Ancore
L’espressione
Pendenza
0,833vw
Intercetta
0,833rem
Intervallo
1,000–1,500rem
rem, e non è una questione di gusto. Un clamp in px ignora del tutto la dimensione del carattere impostata nel browser dal lettore: una violazione di WCAG 1.4.4 che chi l’ha scritta non proverà mai, perché non è lui ad avere messo il proprio valore predefinito a 24px. Il coefficiente vw resta una frazione della viewport, ed è per questo che cambiare la dimensione radice qui sopra sposta i due estremi e lascia stare la pendenza.Cosa viene fuori
| Viewport | Dimensione | |
|---|---|---|
| 320px | 16px | |
| 375px | 16.46px | |
| 480px | 17.33px | |
| 640px | 18.67px | |
| 768px | 19.73px | |
| 1024px | 21.87px | |
| 1280px | 24px | |
| 1440px | 24px(bloccata) | |
| 1920px | 24px(bloccata) |
Da sapere
- · Sopra l’ancora superiore la dimensione resta fissa, quindi allargare la finestra non la cambia più. Entrambe le ancore sono in rem, così continua a seguire la dimensione del carattere scelta dal lettore — la stessa espressione scritta in px non lo farebbe.
Stai costruendo un set intero di questi valori? Il generatore di scale tipografiche produce le dimensioni dei passi da mettere tra i limiti del clamp.
Come si usa
Impostare i quattro ancoraggi
La dimensione al viewport più stretto, quella al viewport più largo e le due larghezze di viewport a cui si applicano. Tutto il resto è derivato.
Controllare la tabella dei valori risolti
Mostra a quanto si valuta l’espressione a una serie di larghezze di viewport reali, segnando quelle in cui a decidere è il limite del clamp e non la pendenza.
Copiare la dichiarazione
Un solo `font-size: clamp(...)`. Vengono mostrate anche pendenza e intercetta, per quando si vuole capire l’espressione invece di limitarsi a incollarla.
Domande frequenti
Perché le unità sono `rem` e non `px`?
Perché un clamp in `px` ignora del tutto la dimensione del carattere impostata nel browser da chi legge. Chi ha portato il valore predefinito a 24px perché ne ha bisogno si ritrova comunque i 16px decisi da chi ha scritto la pagina: è una violazione del criterio WCAG 1.4.4, e per giunta una che chi scrive non sperimenta mai.
Gli estremi del viewport devono essere i miei breakpoint?
Non necessariamente. Il clamp gestisce tutto quello che sta in mezzo, quindi gli estremi utili sono il telefono più stretto che si intende supportare e la larghezza oltre la quale non si vuole che il testo continui a crescere — spesso intorno a 1200–1400px anziché il breakpoint più largo.
Lo zoom continua a funzionare?
Lo zoom di pagina sì: cambia la larghezza del viewport e il clamp lo segue. Lo zoom del solo testo è ciò che gli ancoraggi in `rem` proteggono: la parte in `vw` non gli risponde, quindi senza una componente in `rem` il testo resterebbe congelato. È per questo che l’espressione mescola le due unità.
Si può usare anche per padding e spaziature?
Sì: l’espressione è aritmetica sulle unità e non si cura della proprietà su cui finisce. L’output dice `font-size` perché è il caso più frequente; basta cambiare la proprietà e tenere il valore.
Può ricevere da
Generatore di angoli arrotondati
Border Radius Generator
Modella ogni angolo per conto suo, compresa la sintassi a due valori che dà la forma a squircle, ed esporta il CSS.
Costruttore di griglie CSS
CSS Grid Builder
Dispone una griglia in modo visivo con le aree nominate e restituisce il CSS di grid-template.
Banco di prova per flexbox
Flexbox Playground
Cambia ogni proprietà flex su un esempio dal vivo e mostra il CSS e che cosa ha cambiato ciascuna proprietà.
Calcolatrice delle proporzioni
Aspect Ratio Calculator
Ricava il lato mancante per una proporzione data ed elenca i formati standard che le corrispondono.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Costruttore di griglie CSS
CSS Grid Builder
Dispone una griglia in modo visivo con le aree nominate e restituisce il CSS di grid-template.
Generatore di scale tipografiche
Type Scale Generator
Costruisce da una dimensione di base e da un rapporto una scala modulare di corpi e spaziature, esportabile come CSS o come token.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Verifica del contrasto
Contrast Checker
Dà un punteggio alla coppia testo/sfondo secondo WCAG 2 e APCA e propone il colore più vicino che passa.