Convertitore PX a REM
Per convertire px in rem, dividi il valore in pixel per la dimensione del carattere radice: rem = px / radice. Con la radice predefinita del browser di 16px, 24px / 16 = 1.5rem. Cambia la base qui sotto – 14px per Ant Design, 10px per il trucco del 62,5 % – e i valori rem ed em la seguono; il valore in punti segue invece i pixel, perché 1px è sempre 0,75pt.
Convertire px, rem, em e pt e controllare le sostituzioni CSS.
Radice positiva; valore assoluto ≤1 miliardo; sei decimali arrotondati. Anteprima limitata a 8–72px. CSS ≤100.000 caratteri. Si convertono solo token px non tra virgolette nei valori; commenti, stringhe, URL e content restano invariati. Controllare l’output: conversione lessicale limitata, non validazione CSS. I numeri CSS con esponente (come 1e+3px o 1e-3px) restano interamente invariati.
La conversione avviene in questa pagina, senza inviare numeri o CSS inseriti a un servizio di conversione.
Il campo em presuppone che l'elemento erediti la dimensione base indicata sopra. In CSS, em si calcola sulla dimensione del carattere dell'elemento stesso, e su quella del genitore quando lo usi nella proprietà font-size.
Conversione in blocco: incolla CSS o un elenco di valori in px
Ogni valore in px viene riscritto in rem rispetto alla dimensione base qui sopra.
Copiato
Copia non riuscita. Seleziona il risultato e copialo manualmente.
Come converto i px in rem?
La formula è rem = px / dimensione del carattere radice, e al contrario px = rem x dimensione del carattere radice. Conta solo la dimensione del carattere dell'elemento html radice, per quanto annidato sia l'elemento, ed è questo a rendere prevedibile il calcolo in rem. Con la radice predefinita di 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem e 40px = 2.5rem.
Non arrotondare il risultato. 15px sono esattamente 0.9375rem con radice 16px; arrotondando a 0.94rem la dimensione resa diventa 15.04px e l'allineamento di una griglia salta. I browser calcolano lunghezze sub-pixel e le agganciano alla griglia di pixel del dispositivo al momento del disegno, quindi copia il valore esatto che ti dà il convertitore. Il convertitore stampa fino a sei decimali: esatti con radici che dividono senza resto, come 16px e 10px, e precisi al milionesimo di rem con una radice come 14px che non lo fa.
Tabella px-rem con radice di 16px, 14px e 10px
Lo stesso valore in pixel diventa tre valori rem diversi a seconda della radice impostata dal progetto, perciò questa tabella li riporta tutti e tre, più l'equivalente in punti (CSS definisce 1px come 1/96 di pollice e 1pt come 1/72, quindi 1px = 0.75pt). Le colonne a 16px e 10px sono esatte. Con una radice di 14px la divisione quasi mai è esatta: quei valori sono arrotondati a quattro decimali e segnalati con il segno di approssimazione, mentre il convertitore qui sopra mostra più cifre.
| Pixel | rem (radice 16 px) | rem (radice 14 px) | rem (radice 10 px) | Punti |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem o em: quale unità usare?
La divisione pratica: rem per tutto ciò che deve seguire la dimensione del testo del lettore, em per i valori che devono seguire la dimensione del carattere dell'elemento stesso, e px solo dove una lunghezza deve restare fisicamente fissa. La colonna di esempio presuppone una radice di 16px e un genitore a 16px.
| Unità | Relativa a | 20px equivale a | Ideale per | Segue la dimensione del testo del lettore |
|---|---|---|---|---|
| px | Niente: è assoluta (1px = 1/96 di pollice) | 20px | Bordi sottili, anelli di focus, icone di dimensione esatta | No |
| rem | La dimensione del carattere dell'elemento html radice | 1.25rem | Dimensioni del testo, spaziature, breakpoint, intere scale tipografiche | Sì |
| em | La dimensione del carattere dell'elemento stesso (quella del genitore per font-size) | 1.25em | Spaziatura interna che deve crescere con l'etichetta che racchiude | Sì |
| % | Il valore del genitore per quella proprietà | 125% | Larghezze fluide e vecchi alberi di font-size | Sì (font-size) |
Meglio px o rem per spaziature interne, margini e bordi?
Usa rem per spaziature interne e margini che devono respirare quando il testo cresce: padding dei pulsanti, gutter delle schede, spaziatura delle sezioni, distanze della griglia. Per le linee sottili resta px. Un bordo di 1px è un pixel indipendente dal dispositivo, ben nitido, mentre lo stesso bordo scritto 0.0625rem può arrotondarsi a zero o sfocarsi ad alcuni livelli di zoom, e lo stesso vale per anelli di focus e separatori da 2px. Per questo la conversione in blocco qui sopra lascia intatti i valori 1px e 2px e riscrive tutto il resto.
Le media query sono l'altro punto in cui rem si ripaga. Dentro una media query, rem si calcola sulla dimensione iniziale del carattere del browser e non sulla tua regola html: un breakpoint a 48rem vale 768px per chi usa le impostazioni predefinite e cresce per chi ha aumentato la dimensione del testo. I breakpoint in px non si muovono mai.
Come converto px in rem in Figma, VS Code e Tailwind?
Figma misura in px, ma il Dev Mode può produrre rem: apri le impostazioni di Inspect, scegli «Set unit scale» e inserisci la dimensione del carattere radice (di default 1rem = 16px). Le estensioni di VS Code come cssrem convertono tramite l'autocompletamento ed espongono la radice come impostazione – cssrem.rootFontSize, 16 di default – quindi controlla che coincida prima di fidarti dell'output su un progetto a 14px. Per un file intero, incollalo nel campo di conversione in blocco qui sopra dopo aver impostato la base. La scala predefinita di Tailwind è già in rem con radice 16px: un'unità di spaziatura è 0.25rem (4px), quindi 16px è 4, 24px è 6 e 40px è 10.
Fonti
Informazioni su Convertitore PX a REM
Convertire px, rem, em e pt e controllare le sostituzioni CSS.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Radice positiva; valore assoluto ≤1 miliardo; sei decimali arrotondati. Anteprima limitata a 8–72px. CSS ≤100.000 caratteri. Si convertono solo token px non tra virgolette nei valori; commenti, stringhe, URL e content restano invariati. Controllare l’output: conversione lessicale limitata, non validazione CSS. I numeri CSS con esponente (come 1e+3px o 1e-3px) restano interamente invariati.
Casi d'uso
Come usare
Impostare la radice, modificare un’unità e incollare eventualmente CSS. ≤2px conserva le dimensioni piccole; CSV elenca coppie numeriche convertite uniche.
Radice positiva; valore assoluto ≤1 miliardo; sei decimali arrotondati. Anteprima limitata a 8–72px. CSS ≤100.000 caratteri. Si convertono solo token px non tra virgolette nei valori; commenti, stringhe, URL e content restano invariati. Controllare l’output: conversione lessicale limitata, non validazione CSS. I numeri CSS con esponente (come 1e+3px o 1e-3px) restano interamente invariati.
Suggerimenti Pro
- Radice positiva; valore assoluto ≤1 miliardo; sei decimali arrotondati. Anteprima limitata a 8–72px. CSS ≤100.000 caratteri. Si convertono solo token px non tra virgolette nei valori; commenti, stringhe, URL e content restano invariati. Controllare l’output: conversione lessicale limitata, non validazione CSS. I numeri CSS con esponente (come 1e+3px o 1e-3px) restano interamente invariati.
- rem = px / dimensione radice; em assume lo stesso contesto della radice; pt = px × 0,75 a 96 pixel CSS per pollice.
Domande frequenti
Qui il contesto em coincide con la radice. In CSS dipende dalla dimensione del carattere pertinente e dagli elementi annidati.
Stringhe, commenti, funzioni URL e content vengono conservati. Controllare il foglio di stile; il CSS complesso o errato non viene validato.