Converti px, rem, em, pt e % con una tabella dal vivo e CSS pronto da copiare

Valore da convertire
px
px

rem è relativo alla dimensione del carattere radice; em e % sono relativi al genitore.

Valori convertiti
px
0
rem
0
em
0
pt
0
%
0
Valori comuni
PXREMEMPT
10
12
14
16
18
20
24
28
32
40
48
64
Snippet CSS

						

Informazioni su Convertitore da pixel a EM/REM

Il convertitore da pixel a EM/REM traduce i valori di lunghezza CSS tra px, rem, em, pt e percentuale. Inserisci un valore in una qualsiasi delle cinque unità e una tabella dinamica mostra il suo equivalente in tutte le altre — più uno snippet CSS pronto da copiare e incollare direttamente in un foglio di stile.

Le conversioni rispettano il modo in cui il CSS risolve realmente le unità: rem è relativo alla dimensione del font radice, mentre em e % sono relativi alla dimensione del font dell'elemento genitore. Entrambe le dimensioni di riferimento sono modificabili, così puoi simulare una radice a 16 px con un componente a 14 px, o qualsiasi scala del tuo design system.

Una tabella dei valori comuni mappa le dimensioni più usate dai designer — così domande come “quanto vale 24px in rem” trovano risposta a colpo d'occhio. Lo strumento è gratuito, si aggiorna mentre digiti ed è un punto fermo per convertire mockup a pixel fissi in CSS accessibile e scalabile basato su rem.

Come usare Convertitore da pixel a EM/REM

  1. Inserisci il valore da convertire e seleziona la sua unità: px, rem, em, pt o %.
  2. Regola la dimensione del font radice (per rem) e quella del font genitore (per em e %) se differiscono da 16 px.
  3. Leggi i valori convertiti nella tabella dinamica.
  4. Copia lo snippet CSS generato o qualsiasi valore dalla tabella dei valori comuni.

Domande frequenti

rem è sempre relativo alla dimensione del font radice (html), mentre em è relativo alla dimensione del font ereditata dall'elemento corrente. I valori em annidati si accumulano, motivo per cui rem è di solito più prevedibile per il layout.

Con la dimensione predefinita del font radice di 16 px, 16 px equivalgono esattamente a 1 rem. Cambia il campo della dimensione radice e il convertitore ricalcola — con una radice a 18 px, 16 px diventano circa 0,889 rem.

I valori rem si adattano quando gli utenti cambiano la dimensione del font base del browser, mantenendo il testo leggibile per chi ha bisogno di caratteri più grandi. Le dimensioni fisse in px ignorano questa preferenza, il che danneggia l'accessibilità.

Il CSS definisce 1 pt come 1/72 di pollice e 1 px come 1/96, quindi 1 pt = 1,333 px e 12 pt = 16 px. I punti compaiono principalmente nei fogli di stile per la stampa e nei documenti importati da word processor.

Per la dimensione dei font, % è relativo alla dimensione del font dell'elemento genitore, proprio come em: 100% equivale alla dimensione del genitore, quindi l'87,5% di un genitore a 16 px è 14 px. Imposta il campo della dimensione genitore in base al tuo contesto.


Ricerche popolari
convertitore px in rem convertitore px in em pixel in rem rem in px convertitore unità css calcolatore px em rem
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.