rem	px
0.25rem	4px
0.5rem	8px
0.75rem	12px
1rem	16px
1.25rem	20px
1.5rem	24px
1.75rem	28px
2rem	32px
2.5rem	40px
3rem	48px
4rem	64px
5rem	80px
6rem	96px
8rem	128px
10rem	160px

Convertitore REM in PX - Calcolatore Gratuito da REM a Pixel

Hai bisogno di convertire rem in px per design pixel-perfect? Sei nel posto giusto.

Ecco il punto:

Il nostro convertitore gratuito rem in px ti fornisce valori in pixel istantanei e accurati dalle unità rem. Perfetto per consegne di design e debugging.

Come Usare Questo Convertitore REM in PX

Usare questo strumento è semplice:

Inserisci un valore - Digita il tuo valore rem o pixel in uno dei campi di input
Seleziona la dimensione font base - Scegli da 6px a 32px usando il menu a tendina (predefinito è 16px)
Ottieni risultati istantanei - La conversione avviene automaticamente mentre digiti

Vuoi sapere la parte migliore?

Questo è un convertitore bidirezionale. Puoi convertire rem in px O px in rem - basta inserire il valore in uno dei campi e l’altro si aggiorna istantaneamente. Hai bisogno del contrario? Prova il nostro convertitore PX in REM .

Suggerimento pro: Verifica sempre che la dimensione font base corrisponda al font-size root del tuo progetto. Diversi progetti possono usare basi di 10px, 14px o 18px.

Perché Convertire REM in PX?

Ti starai chiedendo:

Se rem è così ottimo per il design responsivo, perché qualcuno dovrebbe aver bisogno di convertire in pixel?

Ecco la questione:

I pixel sono ancora essenziali in molti scenari reali:

Consegne di design - I designer lavorano in pixel (Figma, Sketch, Adobe XD)
Debugging dei layout - Gli strumenti DevTools del browser mostrano valori calcolati in px
Requisiti pixel-perfect - Alcuni elementi necessitano dimensioni esatte in pixel
Manutenzione codice legacy - Codebase più vecchi possono usare valori px
Comunicazione con i clienti - Gli stakeholder capiscono i pixel meglio di rem

Cos’è REM?

REM sta per “Root EM” - un’unità CSS relativa basata sulla dimensione del font dell’elemento root.

Ora:

Se il tuo elemento <html> ha font-size: 16px, allora:

1rem = 16px
2rem = 32px
0.5rem = 8px

I valori REM scalano proporzionalmente quando la dimensione del font root cambia, rendendo i layout responsivi alle preferenze dell’utente.

Cos’è PX (Pixel)?

PX sta per pixel - l’unità più fondamentale nel design digitale.

Ecco cosa rende i pixel preziosi:

Precisione assoluta - 1px è sempre 1px, nessun calcolo necessario
Comprensione universale - Tutti, dai designer ai clienti, capiscono i pixel
Standard degli strumenti di design - Tutti i principali strumenti esportano in pixel
DevTools del browser - Gli stili calcolati sono mostrati in pixel
Consistenza di stampa - I pixel mappano prevedibilmente alle dimensioni fisiche

La conclusione:

I pixel forniscono la certezza e precisione che le unità relative non possono offrire.

REM vs PX: Quando Vincono i Pixel

Ecco un confronto che mostra quando px è la scelta migliore:

Scenario	Usa REM	Usa PX
Dimensione testo del corpo	✅ Migliore	❌ Non ideale
Bordi	❌ Può sfocare	✅ Linee nitide
Ombre	❌ Scala troppo	✅ Controllato
Breakpoint media query	❌ Imprevedibile	✅ Consistente
Specifiche di design	❌ Richiede conversione	✅ Corrispondenza diretta
Divisori da 1px	❌ Può scomparire	✅ Sempre visibile
Dimensione icone	Dipende	✅ Spesso migliore

Migliora ancora:

Usare px strategicamente insieme a rem ti dà il meglio di entrambi i mondi:

Bordi prevedibili - I bordi da 1px rimangono nitidi a qualsiasi zoom
Breakpoint consistenti - Le media query si comportano in modo affidabile
Accuratezza del design - Corrispondere i mockup pixel per pixel
Chiarezza nel debugging - Vedere i valori calcolati esatti

Come Funziona la Conversione REM in PX

La formula rem in px è semplice:

px = rem × dimensione-font-base

Per esempio, con un font base di 16px:

1rem × 16 = 16px
1.5rem × 16 = 24px
2rem × 16 = 32px
0.5rem × 16 = 8px

Per convertire px in rem:

rem = px ÷ dimensione-font-base

Questo è ingegnoso:

Se il tuo progetto usa una base di 10px (62.5%), la matematica diventa ancora più semplice: 1.6rem = 16px, 2rem = 20px.

Tabella Comune di Conversione REM in PX

Ecco le conversioni rem in px più frequenti (base 16px):

REM	Pixel	Caso d’Uso Comune
0.25rem	4px	Bordi sottili, micro spaziatura
0.5rem	8px	Piccoli spazi, padding icone
0.75rem	12px	Testo piccolo, didascalie
0.875rem	14px	Testo secondario, etichette
1rem	16px	Testo del corpo predefinito
1.125rem	18px	Testo del corpo grande
1.25rem	20px	Intestazioni H4
1.5rem	24px	Intestazioni H3, spaziatura sezione
2rem	32px	Intestazioni H2
3rem	48px	Intestazioni H1
4rem	64px	Testo hero, intestazioni display

Conversione in batch

Devi convertire un intero foglio di stile o un blocco di testo lungo? Usa la conversione in batch.

Incolla CSS/testo con valori rem (ad esempio 1.25rem).
Scegli la dimensione del font base del progetto.
Copia l’output con tutti i valori rem convertiti in px.

La conversione in batch sostituisce solo i valori rem (rem -> px) e usa la dimensione base selezionata.

Domande Frequenti

Quando dovrei usare px invece di rem?

Usa i pixel per:

Bordi - I bordi da 1px devono rimanere nitidi a qualsiasi dimensione
Ombre - Le ombre fisse appaiono più consistenti
Media query - Definisci i breakpoint in px per affidabilità
Divisori sottili - Linee sottili che non dovrebbero scalare
Corrispondenza specifiche design - Quando hai bisogno di valori esatti in pixel

Come trovo la dimensione font base di un sito web?

Apri i DevTools del browser (F12), seleziona l’elemento <html> e controlla il valore calcolato di font-size. La maggior parte dei siti usa 16px, ma alcuni usano 10px (62.5%), 14px o 18px.

Perché i designer lavorano in pixel, non in rem?

Strumenti di design come Figma, Sketch e Adobe XD sono basati sui pixel. I designer hanno bisogno di misure esatte per layout, spaziatura e tipografia. La conversione rem in px avviene durante lo sviluppo, non il design.

Posso usare sia px che rem nello stesso progetto?

Assolutamente. Best practice:

rem per dimensioni font, padding, margini (elementi scalabili)
px per bordi, ombre, breakpoint (elementi fissi)

Questo approccio ibrido ti dà i benefici di accessibilità di rem mantenendo la precisione in pixel dove necessario.

Come mostrano i DevTools del browser i valori rem?

I DevTools mostrano valori calcolati in pixel. Se imposti font-size: 1.5rem e la tua base è 16px, i DevTools mostreranno font-size: 24px. Ecco perché la conversione rem in px è essenziale per il debugging.

Cosa succede se la mia dimensione font base cambia responsivamente?

Se usi clamp() o media query per cambiare la dimensione del font root, i tuoi valori rem produrranno risultati in pixel diversi a diverse dimensioni del viewport. Usa questo convertitore con ogni dimensione base per verificare il tuo design a tutti i breakpoint.

C’è una differenza di prestazioni tra px e rem?

Nessuna differenza di prestazioni misurabile. I browser calcolano rem in px istantaneamente. Scegli in base al caso d’uso, non alle prestazioni.

Perché 0.5rem a volte sembra sbagliato?

Con una base di 16px, 0.5rem = 8px. Ma su alcuni display, il rendering sub-pixel può far sembrare certi valori sfocati. Per bordi sottili o divisori, attieniti a valori interi di pixel come 1px.

Bulk Conversion

Conversion Table (16 px)