Unità CSS
Inserisci un valore e scegli l’unità per vedere la stessa dimensione in tutte le unità CSS, pronta da copiare.
La stessa dimensione in altre unità
- 1.5remdimensione del font radice
- 1.5emdimensione del font del genitore
- 150%percentuale della dimensione del font del genitore
- 18ptpunti
- 1.5pcpica
- 0.25inpollici
- 0.635cmcentimetri
- 6.35mmmillimetri
- 25.4Qquarti di millimetro
- 1.6667vwpercentuale della larghezza del viewport
- 2.6667vhpercentuale dell’altezza del viewport
- 2.6667vminpercentuale del lato più corto del viewport
- 1.6667vmaxpercentuale del lato più lungo del viewport
Contesto
Da px a rem con 16 px
| px | rem | pt |
|---|---|---|
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 28px | 1.75rem | 21pt |
| 32px | 2rem | 24pt |
| 36px | 2.25rem | 27pt |
| 40px | 2.5rem | 30pt |
| 48px | 3rem | 36pt |
| 64px | 4rem | 48pt |
Un punto vale 1,333 px, perché un pollice equivale a 96 px e 72 pt. Al contrario, un pixel vale 0,75 pt.
Come funziona
Il rem si basa sulla dimensione del font dell’elemento html, che è 16 px in tutti i browser se nessuno la modifica. Quindi 24 px sono 1,5 rem. Impostare html { font-size: 62.5% } dà 10 px per rem e rende più facili i calcoli a mente, ma cambia anche tutto ciò che si basa sulla dimensione predefinita.
L’em si basa sulla dimensione del font dell’elemento genitore e quindi si moltiplica quando gli elementi sono annidati: 1,2 em dentro 1,2 em è 1,44 volte più grande. La percentuale in font-size funziona allo stesso modo, con 100% pari a 1 em. La percentuale per larghezze o margini si basa invece sul blocco contenitore e qui non viene convertita.
Il rem è la scelta abituale per dimensioni del font e spaziature, perché così la pagina segue la dimensione che il visitatore ha scelto nel browser. I px nelle dimensioni del font non impediscono lo zoom, ma ignorano quell’impostazione, come spiegano le linee guida WCAG sul ridimensionamento del testo.
Vw e vh sono l’uno per cento della larghezza e dell’altezza del viewport, vmin e vmax l’uno per cento del suo lato più corto e più lungo. I valori dipendono interamente dalla finestra, quindi il pulsante prende le dimensioni della finestra che stai usando ora. Sui telefoni vh può cambiare quando compare la barra degli indirizzi; dvh, svh e lvh risolvono il problema.
Pt, pc, in, cm, mm e Q sono unità assolute con rapporti fissi in CSS: un pollice equivale a 96 px, 72 pt e 2,54 cm. Sullo schermo raramente corrispondono a centimetri reali, perché un pixel CSS non è un pixel fisico. Sono più utili nei fogli di stile per la stampa.
I valori sono scritti con il punto decimale e al massimo quattro decimali, come richiede CSS.