Convertitore PX in REM - Calcolatore Gratuito da Pixel a REM

Hai bisogno di convertire px in rem per i tuoi progetti web? Sei nel posto giusto.

Ecco come funziona:

Il nostro convertitore gratuito px to rem ti offre conversioni istantanee e precise. Nessun calcolo manuale. Nessuna supposizione.

Come usare questo convertitore PX in REM

Usare questo strumento è semplice:

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

Vuoi sapere la parte migliore?

Questo è un convertitore bidirezionale. Puoi convertire px in rem O rem in px - basta inserire il tuo valore in qualsiasi campo e l’altro si aggiorna istantaneamente.

Suggerimento professionale: Assicurati di impostare la corretta dimensione del font base che corrisponda al font-size radice del tuo progetto. Questo garantisce conversioni precise da px a rem.

Cos’è PX (Pixel)?

PX sta per pixel - l’unità di misura più basilare negli schermi digitali.

Ecco cosa devi sapere:

1px = un punto fisico sul tuo schermo
I pixel sono unità assolute - non cambiano in base ad altri elementi
La maggior parte degli strumenti di design (Figma, Sketch, Photoshop) esporta misure in pixel

Ma ecco il punto cruciale:

I valori fissi in pixel non scalano bene. Quando gli utenti cambiano la dimensione del font del browser per accessibilità, i layout basati su px rimangono rigidi.

Cos’è REM?

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

Ora diventa interessante:

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

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

Il punto chiave:

I valori REM scalano proporzionalmente quando la dimensione del font radice cambia. Questo rende l’intero layout responsivo alle preferenze dell’utente.

PX vs REM: Perché usare REM?

Ecco un confronto tra le unità px e rem:

Caratteristica	PX	REM
Tipo	Assoluto	Relativo
Scalabilità	❌ Dimensione fissa	✅ Scala con il font radice
Accessibilità	❌ Ignora le impostazioni utente	✅ Rispetta le preferenze utente
Manutenzione	❌ Modificare ogni valore manualmente	✅ Regola il font radice, tutto scala
Prevedibilità	✅ Sempre la stessa dimensione	✅ Coerente tra i componenti

Migliora ancora:

Usare rem per le tue conversioni da px a rem offre questi vantaggi:

Migliore accessibilità - Gli utenti che aumentano la dimensione del font del browser ottengono testo più grande
Design responsivo più facile - Cambia un valore, tutto scala
Spaziatura coerente - Tutti gli elementi mantengono relazioni proporzionali
A prova di futuro - Funziona bene con CSS moderno e sistemi di design

Come funziona la conversione PX in REM

La formula da px a rem è semplice:

rem = px ÷ dimensione-font-base

Per esempio, con un font base di 16px:

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

Per convertire rem in px:

px = rem × dimensione-font-base

Questo è incredibile:

Alcuni sviluppatori impostano la loro base al 62.5% (10px) per facilitare il calcolo mentale. Con base 10px: 16px = 1.6rem, 20px = 2rem, 14px = 1.4rem.

Tabella comune di conversione PX in REM

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

Pixel	REM	Uso comune
4px	0.25rem	Bordi sottili, micro spaziatura
8px	0.5rem	Piccoli spazi, padding icone
12px	0.75rem	Testo piccolo, didascalie, etichette
14px	0.875rem	Testo secondario, corpo compatto
16px	1rem	Testo corpo predefinito
18px	1.125rem	Testo corpo grande
20px	1.25rem	Titoli H4, testo di evidenza
24px	1.5rem	Titoli H3
32px	2rem	Titoli H2
48px	3rem	Titoli H1
64px	4rem	Testo hero, titoli display

Domande frequenti

Qual è la differenza tra REM e EM?

REM è relativo alla dimensione del font dell’elemento radice <html>. EM è relativo alla dimensione del font dell’elemento padre. REM è più prevedibile perché fa sempre riferimento allo stesso valore base, mentre EM può accumularsi e diventare confuso negli elementi annidati.

Qual è la dimensione predefinita del font base per la conversione px in rem?

La maggior parte dei browser usa 16px come dimensione del font radice predefinita. Il nostro convertitore px in rem usa 16px come predefinito, ma puoi cambiarlo per corrispondere al tuo progetto.

Devo sempre usare 16px come base?

No. Usa quello che si adatta al tuo sistema di design. Opzioni comuni:

10px (62.5%) - Calcolo mentale più facile
14px - Design compatti
16px - Predefinito del browser
18px - Alta leggibilità

Come imposto la dimensione del font base in CSS?

Ecco come impostare la dimensione del font base:

/* Metodo 1: Usando pixel (16px predefinito) */
html {
  font-size: 16px;
}

/* Metodo 2: Usando percentuale (62.5% = 10px) */
html {
  font-size: 62.5%;
}

/* Metodo 3: Usando clamp per base responsiva */
html {
  font-size: clamp(14px, 2vw, 18px);
}

Suggerimento professionale:

Usare la percentuale (come 62.5%) rispetta meglio le impostazioni del browser dell’utente rispetto ai pixel fissi. Se un utente imposta il browser con testo più grande, le radici basate su percentuale scaleranno di conseguenza.

Le unità rem funzionano nei browser vecchi?

REM è supportato in tutti i browser moderni, incluso IE9+. Per browser molto vecchi, puoi fornire fallback in px, ma questo è raramente necessario oggi.

Quando dovrei usare px invece di rem?

Usa pixel per:

Bordi - I bordi di 1px devono rimanere nitidi
Ombre del box - Spesso appaiono meglio con valori fissi
Media query - Definisci breakpoint in px per coerenza

Usa rem per:

Dimensioni del font - Sempre
Spaziatura (margin, padding) - Per layout scalabili
Dimensioni dei componenti - Quando vuoi scalatura proporzionale