Vai al contenuto
🛠️
Whiz Tools

Convertitore da PX a REM a EM – Calcolatore Gratuito di Unità CSS

Converti istantaneamente pixel in unità REM ed EM. Convertitore gratuito di unità CSS per web design responsive. Supporta dimensioni dei caratteri personalizzate e calcoli in tempo reale per risultati precisi.

Convertitore di unità PX, REM ed EM

Converti tra pixel (PX), root em (REM) ed em (EM). Inserisci un valore in qualsiasi campo per vedere i valori equivalenti nelle altre unità.

px
px
px
rem
em
Visualizzazione non disponibile per valori negativi o zero

Formule di conversione

  • PX a REM: valore in px ÷ dimensione carattere radice
  • PX a EM: valore in px ÷ dimensione carattere padre
  • REM a PX: valore in rem × dimensione carattere radice
  • EM a PX: valore in em × dimensione carattere padre
Calcolatore di caricamento...
📚

Documentazione

Convertitore di unità PX, REM ed EM

Un convertitore da px a rem ed em converte una lunghezza CSS tra pixel (px), em radice (rem) ed em, usando una dimensione del carattere radice e una dimensione del carattere del genitore impostate dall'utente. Le tre unità sono i modi più comuni per dimensionare il testo e la spaziatura in CSS, il linguaggio usato per definire lo stile delle pagine web.

Che cosa sono px, rem ed em?

Un pixel (px) è un'unità fissa. Un riquadro impostato con una larghezza di 200px rimane largo 200px indipendentemente dalla dimensione del carattere usata dalla pagina.

Un rem ("em radice") è un'unità che varia con la dimensione del carattere dell'elemento radice della pagina, normalmente il tag <html>. La maggior parte dei browser imposta questa dimensione del carattere radice su 16px, a meno che il sito non la modifichi. Se la dimensione del carattere radice è 16px, allora 1rem equivale a 16px.

Un em è un'unità che varia con la dimensione del carattere dell'elemento genitore, cioè l'elemento che lo contiene. Se un elemento genitore ha font-size: 20px, allora 1em all'interno di quel genitore equivale a 20px.

La differenza principale tra rem ed em riguarda il riferimento usato da ciascuna unità. Rem considera sempre l'elemento radice. Em considera il genitore più vicino, quindi il suo valore può cambiare a ogni livello di annidamento.

Come calcolare da px a rem

Per convertire i pixel in rem, dividere il valore in pixel per la dimensione del carattere radice:

r=pRr = \frac{p}{R}

dove r è la lunghezza in rem, p la lunghezza in pixel e R la dimensione del carattere radice in pixel.

Esempio di calcolo

Con la dimensione del carattere radice predefinita di 16px, 24px si convertono in:

24 ÷ 16 = 1,5rem

Se un sito imposta la dimensione del carattere radice su 10px (un trucco comune, ottenuto impostando html { font-size: 62.5%; }, poiché 62,5% di 16px corrisponde a 10px), gli stessi 24px diventano:

24 ÷ 10 = 2,4rem

Come calcolare da rem a px

Per eseguire la conversione inversa, moltiplicare il valore in rem per la dimensione del carattere radice:

p=r×Rp = r \times R

dove p è la lunghezza in pixel, r la lunghezza in rem e R la dimensione del carattere radice.

Con una radice di 16px, 1.5rem si riconverte in 1,5 × 16 = 24px.

Come calcolare da px a em

Per convertire i pixel in em, dividere il valore in pixel per la dimensione del carattere dell'elemento genitore:

e=pPe = \frac{p}{P}

dove e è la lunghezza in em e P la dimensione del carattere dell'elemento genitore in pixel.

Esempio di calcolo

Se la dimensione del carattere dell'elemento genitore è 20px, allora 24px si convertono in:

24 ÷ 20 = 1,2em

Come calcolare da em a px

Moltiplicare il valore in em per la dimensione del carattere del genitore:

p=e×Pp = e \times P

dove p è la lunghezza in pixel, e la lunghezza in em e P la dimensione del carattere del genitore.

Con un genitore di 20px, 1.2em si riconverte in 1,2 × 20 = 24px.

Come calcolare da rem a em e da em a rem

Poiché rem ed em fanno riferimento a dimensioni del carattere diverse, per convertirle l'una nell'altra servono sia la dimensione del carattere radice sia quella del genitore:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

dove R è la dimensione del carattere radice e P quella del genitore.

Esempio di calcolo

Con una dimensione del carattere radice di 16px e una dimensione del carattere del genitore di 20px, 2rem si convertono in:

2 × (16 ÷ 20) = 1,6em

Se le dimensioni del carattere radice e del genitore sono uguali, 1rem equivale sempre a 1em.

Quando è utile ciascuna unità

I pixel sono adatti ai dettagli che non devono cambiare dimensione, come un bordo di 1px o un'icona di larghezza fissa.

Rem è comune per la spaziatura e la tipografia che devono rimanere coerenti in tutta la pagina. Poiché fa sempre riferimento alla dimensione del carattere radice, un valore in rem non cambia per quanto profondamente sia annidato un elemento. Questo significa anche che i layout basati su rem si adattano automaticamente quando l'utente aumenta la dimensione del carattere predefinita del browser, aiutando le persone con problemi di vista.

Em funziona bene all'interno di un singolo componente autonomo, come un pulsante, in cui la spaziatura interna deve variare insieme alla dimensione del carattere del pulsante. Un problema comune di em è il suo effetto cumulativo: se diversi elementi annidati usano ciascuno font-size: 1.2em, ogni livello moltiplica quello precedente, quindi le dimensioni del carattere aumentano più del previsto.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Dopo tre livelli, il testo è aumentato di circa 73%, non del 20% che uno sviluppatore potrebbe aspettarsi da una singola regola 1.2em.

Uso del convertitore

  1. Inserire un valore nel campo dei pixel, dei rem o degli em.
  2. Gli altri due campi si aggiornano automaticamente, con arrotondamento a quattro cifre decimali.
  3. Impostare la dimensione del carattere radice in modo che corrisponda all'elemento <html> del progetto. Nella maggior parte dei browser è 16px per impostazione predefinita e influisce solo su rem.
  4. Impostare la dimensione del carattere del genitore in modo che corrisponda alla dimensione del carattere dell'elemento all'interno del quale si troverebbe un valore em. Influisce solo su em.
  5. Usare il pulsante di copia accanto a un campo per copiarne il valore.

Entrambi i campi della dimensione del carattere accettano un numero intero di pixel e il valore minimo consentito è 1px. Il pulsante di ripristino cancella il valore e reimposta entrambe le dimensioni del carattere su 16px.

Sotto i campi, lo strumento disegna una barra per ogni unità. Le tre barre rappresentano la stessa lunghezza fisica, quindi hanno la stessa larghezza: è un controllo rapido che la conversione sia corretta. Una barra viene disegnata alla sua lunghezza effettiva in pixel fino a 300px; i valori più lunghi vengono ridotti per rientrare, quindi un valore di 600px e uno di 900px terminano entrambi a 300px. Le barre appaiono solo quando il valore in pixel è maggiore di zero.

Domande frequenti

Qual è la differenza tra rem ed em? Rem fa sempre riferimento alla dimensione del carattere dell'elemento radice. Em fa riferimento alla dimensione del carattere dell'elemento genitore più vicino. Un valore in rem rimane uguale in ogni punto della pagina; un valore in em può cambiare in base alla profondità di annidamento dell'elemento.

Perché i browser usano 16px come dimensione del carattere predefinita? 16px è da tempo la dimensione predefinita del testo nei principali browser, perché è leggibile comodamente sugli schermi comuni senza stili aggiuntivi. Le linee guida sull'accessibilità web raccomandano che il testo possa essere ridimensionato fino a 200% senza compromettere il layout della pagina, e 16px è un punto di partenza pratico.

Che cos'è il trucco del 62,5%? Impostare html { font-size: 62.5%; } trasforma la dimensione del carattere radice predefinita di 16px in 10px, poiché 62,5% di 16 equivale a 10. Questo semplifica i calcoli con rem, perché 1,6rem equivale a 16px e 2,4rem equivale a 24px.

I valori px, rem ed em possono essere negativi? Sì, per le proprietà che accettano lunghezze negative, come i margini o le trasformazioni CSS. In CSS la spaziatura interna non può essere negativa; i browser ignorano un valore negativo della spaziatura interna. Il convertitore gestisce i valori negativi, ma non disegna barre per essi, perché una barra non può avere larghezza negativa.

È necessario convertire ogni valore in pixel in rem? Non necessariamente. I bordi e gli altri dettagli fini vengono solitamente mantenuti in pixel, poiché raramente devono variare con la dimensione del carattere e possono apparire irregolari con larghezze inferiori a un pixel. Rem è adatto alla spaziatura e alla tipografia che devono adattarsi alla preferenza dell'utente per la dimensione del carattere.

La scelta dell'unità influisce sulle prestazioni della pagina? No. Durante il layout, i browser convertono ogni lunghezza CSS nello stesso valore interno, quindi px, rem ed em vengono visualizzati alla stessa velocità. La scelta tra queste unità influisce sulla manutenibilità e sull'accessibilità, non sulla velocità.