Convertitore di unità di misura CSS

Converti tra px, rem, em, vw, vh, pt, cm, mm, in e % con un contesto configurabile.

Impostazioni di contesto

Converti

Risultati

Riferimento unità CSS

Unità assolute

Unità relative

Quando usare rem o em?

Usa rem per un dimensionamento coerente (margini, padding, dimensioni carattere) · fa sempre riferimento alla radice. Usa em quando vuoi un dimensionamento relativo al padre, come componenti annidati che si adattano al loro contesto.

Perché px non è sempre uguale a un pixel fisico?

Il px CSS è un «pixel di riferimento» definito come 1/96 di pollice a distanza di braccio. Sugli schermi ad alta densità (HiDPI), un px CSS può corrispondere a 2 o 3 pixel fisici.

Il pixel di riferimento CSS, la chiave di volta di ogni unità assoluta

Le unità assolute CSS (in, cm, mm, Q, pt, pc, px) sono ancorate al pixel di riferimento CSS. Il W3C CSS Values and Units Module Level 3 lo definisce come «l'angolo visivo di un pixel su un dispositivo con una densità di pixel del dispositivo di 96 dpi e una distanza dal lettore pari alla lunghezza di un braccio.» Per una lunghezza di un braccio di circa 28 pollici quell'angolo visivo è all'incirca 0,0213°, equivalente a circa 0,26 mm di larghezza fisica dello schermo a una distanza di visione tipica, e la specifica illustra che lo stesso angolo visivo si traduce in circa 1,3 mm a 12 piedi, motivo per cui i pixel di proiettori e TV possono essere fisicamente più grandi ma contare comunque come un pixel CSS ciascuno.

Per gli schermi, la specifica definisce CSS 1in = 96 px anziché derivare dai pollici reali dello schermo. Questo significa che le conversioni nella tabella qui sopra sono esatte e non dipendono dai DPI del display: 12 pt sono sempre 16 px, 1 pc è sempre 16 px, 1 mm è sempre circa 3,78 px. Su un display ad alta densità (Retina, 4K), il sistema operativo mappa ogni pixel CSS sui pixel del dispositivo che meglio approssimano l'angolo visivo, tipicamente 2 pixel del dispositivo per pixel CSS su un MacBook Retina, 3 su un iPhone Pro, 1,5 su un desktop Windows con scaling al 150%. Un nitido bordo 1px su uno schermo Retina occupa 2 pixel del dispositivo.

Unità relative al font

Queste si risolvono rispetto alla tipografia anziché ai pollici fisici. Sono il fondamento di layout accessibili e scalabili.

em è la pietra angolare, con una sorprendente profondità storica, precede il CSS di circa 500 anni. Nella stampa a caratteri mobili (post-Gutenberg, intorno al 1450), l'«em quad» era un blocco quadrato di metallo la cui larghezza era pari all'altezza del corpo del carattere, storicamente approssimando la larghezza della M maiuscola. Il CSS prende in prestito l'astrazione: 1em è pari alla dimensione del font calcolata dell'elemento corrente. Il famoso tranello è che le dichiarazioni font-size: 1.2em annidate si moltiplicano, un figlio di 1.2em dentro un genitore di 1.2em viene reso a 1,44× il nonno.

rem («root em») fu aggiunta in CSS3 per risolvere esattamente quel problema di accumulo. 1rem è pari alla dimensione del font dell'elemento radice <html>, non influenzata dall'annidamento dei genitori. I browser impostano la radice in modo predefinito a 16 px a meno che l'utente non la sovrascriva, quindi 1rem = 16px in condizioni predefinite. rem fu distribuita in Safari 4.1 e Firefox 3.6 nel 2010, in IE9 nel marzo 2011, IE8 non l'ha mai supportata, il che impose ripieghi in px fino al 2014 circa.

Unità relative al font più recenti (CSS Values 4) includono ch (la larghezza del carattere «0» nel font corrente, utile per le larghezze massime di lunghezza riga come max-width: 60ch o 66ch, che rientrano nell'intervallo di lettura tipograficamente ideale di 45-75 caratteri), ex (l'altezza della x del font), cap (l'altezza delle maiuscole), ic (l'avanzamento dell'ideogramma CJK 水), e lh / rlh (l'interlinea calcolata dell'elemento / radice, utile per il ritmo verticale).

Unità in percentuale del viewport (e il problema della barra degli indirizzi su mobile)

Le quattro classiche, vw, vh, vmin, vmax: rappresentano l'1% della larghezza del viewport, l'1% dell'altezza del viewport, l'1% della minore delle due, e l'1% della maggiore. A 1920 × 1080: 1vw = 19.2px, 1vh = 10.8px.

100vh è stato a lungo un dolore su mobile perché sia iOS Safari sia Chrome Mobile mostrano una barra dell'URL che si ritrae mentre scorri. I browser dovevano scegliere: rendere 100vh pari al viewport corto (barra dell'URL visibile (il contenuto viene tagliato dopo lo scorrimento) o a quello alto (barra dell'URL nascosta) ampio spazio vuoto al primo disegno). iOS Safari scelse il comportamento alto, lasciando gli sviluppatori a fare debug per anni di «perché la mia sezione hero è più alta dello schermo?».

L'iniziativa Interop 2022 (Apple, Google, Igalia, Microsoft, Mozilla e altri) ha aggiunto nuove varianti di viewport nel marzo 2022 per risolvere questo:

Ricetta pratica: min-height: 100svh su una sezione hero così non viene tagliata su iOS, oppure height: 100dvh su un modale a schermo intero. Safari ha distribuito il supporto per primo (15.4, marzo 2022); Firefox 101 (maggio 2022); Chrome ed Edge 108 (dicembre 2022). Il supporto globale è ora diffuso.

Unità delle query di contenitore

Una famiglia più recente, cqw, cqh, cqi, cqb, cqmin, cqmax: consente a un elemento di dimensionarsi in base al suo contenitore anziché al viewport. Essenziale per il design guidato dai componenti dove lo stesso componente potrebbe apparire largo 300 px in una barra laterale e largo 900 px in una colonna principale. L'unità viene valutata rispetto al contenitore antenato più vicino con container-type impostato; se non esiste alcun contenitore idoneo, la specifica ripiega sull'unità del viewport piccolo su quell'asse. Le query di contenitore (e le unità) furono distribuite in Chromium 105 nel 2022, Safari 16 nel settembre 2022, e Firefox 110 nel febbraio 2023, diventando Baseline di nuova disponibilità nel 2023.

Le percentuali, e perché non sono davvero una lunghezza

Le percentuali non sono un'unità di lunghezza di per sé, sono un tipo di valore separato che si risolve in modo contestuale:

A causa di questa risoluzione contestuale, % non può semplicemente essere convertito in px senza conoscere la dimensione del genitore, il convertitore qui sopra la chiede esplicitamente.

Guida pratica) quando usare cosa

Tipografia fluida con clamp()

clamp(MIN, PREFERRED, MAX) restituisce il valore preferito limitato dal minimo e dal massimo. Il classico schema di tipo fluido combina un minimo e un massimo basati su rem con una parte centrale di scalatura guidata da vw:

h1 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem); }

Il termine centrale scala linearmente con il viewport, mentre il minimo e il massimo basati su rem prevengono dimensioni estreme e preservano la scalatura del font dell'utente. clamp() ha raggiunto Baseline ampiamente disponibile a luglio 2020 (Chrome 79, Firefox 75, Safari 13.1). Strumenti come Utopia (utopia.fyi) e fluid-type-scale.com prendono larghezze minime / massime del viewport, dimensioni minime / massime del font, e un rapporto di scala modulare (1,2, 1,25, 1,333, 1,5, aureo) ed emettono dichiarazioni pronte da incollare.

Accessibilità, WCAG SC 1.4.4 Ridimensionamento del testo

Lo standard richiede che il testo sia ingrandibile al 200% della dimensione originale senza perdita di contenuto o funzionalità. Non impone un'unità specifica, ma le tecniche sufficienti elencate includono «usare misure che sono relative ad altre misure nel contenuto», le unità relative (em, rem, %) rendono più facile la conformità; i layout solo in pixel possono passare tramite lo zoom del browser ma sono più fragili. Il test mentale: questo dovrebbe scalare quando l'utente ingrandisce la dimensione predefinita del testo? Se sì, usa rem. Bordi, padding decorativo e pura decorazione possono restare px.

Altre domande

Perché 1in non è davvero un pollice sul mio schermo?

Perché la specifica CSS ancora le unità assolute a un riferimento di angolo visivo anziché ai pollici fisici. Un 1in CSS è definito come esattamente 96 pixel CSS, che il browser mappa sui pixel del dispositivo che meglio approssimano il riferimento a una distanza di visione tipica. Sulla maggior parte dei monitor finisce per essere vicino a un pollice reale, ma su una TV vista dall'altra parte della stanza sarà fisicamente più grande, e su un laptop ad alta densità sulle tue ginocchia potrebbe essere leggermente più piccolo. Per una misurazione fisica reale, usa un righello contro lo schermo.

Cos'è il «trucco del 62,5%» che a volte si sente menzionare?

Uno schema molto usato: html { font-size: 62.5%; }. Poiché 62,5% × 16 = 10, questo rende 1rem = 10px: comodo per il calcolo mentale (1.6rem = 16px, 2.4rem = 24px). È dibattuto; gli oppositori sostengono che sovrascrive la dimensione predefinita del font preferita dall'utente ed è leggermente ostile all'utente per l'accessibilità. Molti team moderni scelgono un rapporto con la sovrascrittura dell'utente esplicitamente preservata (ad es., impostando il font-size del body in rem così la cascata rispetta il valore predefinito dell'utente).

Quando dovrei usare vw rispetto a cqw?

Usa vw quando la dimensione dovrebbe seguire il viewport (testo hero al vivo, modali a schermo intero). Usa cqw quando la dimensione dovrebbe seguire il contenitore del componente: ad esempio un titolo di scheda che è più grande quando la scheda è nella colonna principale e più piccolo quando è in una barra laterale, indipendentemente dalla dimensione del viewport. Le unità delle query di contenitore furono distribuite nel 2022-2023 e sono la risposta giusta quasi ogni volta che altrimenti ricorreresti a una scala di font guidata da media query su un singolo componente.

Qual è la differenza tra dpi e dppx nelle query @media?

Entrambi esprimono la risoluzione. dppx significa «punti per pixel CSS», 1dppx = 96dpi, poiché il CSS definisce 96 px per pollice. @media (min-resolution: 2dppx) prende di mira i display di classe Retina dove ogni pixel CSS viene reso con almeno 2 pixel del dispositivo. Usare dppx è generalmente preferito perché si tiene alla larga dalla confusione dpi-contro-pollice-CSS.

Viene inviato qualcosa a un server?

No. Le conversioni sono semplice aritmetica JavaScript che gira localmente nel tuo browser. Nulla dei tuoi input viene inviato da nessuna parte; la pagina funziona offline una volta caricata.

Strumenti correlati

Convertitore gratuito da PX a REM Generatore CSS Border Radius Convertitore di unità di misura gratuito online