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.
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.
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
Questo convertitore da px a rem risponde a una sola domanda: che cosa diventa, nel CSS, un valore in pixel del tuo file di design con la dimensione del carattere radice che il progetto usa davvero? Sposta il cursore della base – 16px è il valore predefinito del browser, 14px quello di Ant Design, 10px il vecchio trucco del 62,5 % – e ogni valore rem ed em della pagina viene ricalcolato su di essa, così non devi mai ricordare per quale base è stato scritto un numero.
La base da inserire è quella che il tuo foglio di stile imposta sull'elemento html, non su body e non la dimensione del carattere del componente su cui stai lavorando. Se nessuna regola la definisce, vale il valore predefinito del browser: 16px, a meno che il lettore non l'abbia alzato. Nei DevTools seleziona il nodo html e leggi il suo font-size calcolato: quel numero è il divisore per l'intero foglio. I quattro pulsanti dei framework lo compilano per Tailwind, Bootstrap, Material UI e Ant Design.
Qui la differenza la fa la modalità in blocco: incolla un foglio di stile, un estratto di specifiche da Figma o un semplice elenco di numeri e ottieni la versione in rem con il conteggio di ciò che è cambiato, pronta da copiare o da scaricare in CSV. Sotto lo strumento trovi la formula nei due sensi, una tabella da 1px a 96px con tre radici e gli equivalenti in punti, una tabella di confronto tra unità e dieci domande con risposte estese.
Casi d'uso
Come usare
Imposta la dimensione base (radice): 16px è il valore predefinito del browser, 14px corrisponde ad Ant Design, 10px dà il trucco del 62,5 %.
Scrivi il valore in pixel nel campo Pixel. I campi rem, em e pt si aggiornano mentre digiti.
Oppure procedi al contrario: inserisci un valore in rem e leggi la dimensione in pixel che produce con la radice attuale.
Tocca un valore nella tabella rapida da 8px a 96px per caricarlo, oppure consulta la tabella completa per radici di 16px, 14px e 10px.
Incolla un intero blocco CSS nella conversione in blocco per riscrivere tutti i valori in px in una volta, mantenendo i bordi da 1px e 2px.
Copia la dichiarazione CSS generata, oppure scarica le coppie px/rem convertite in CSV per la consegna al design.
Suggerimenti Pro
- Imposta prima la dimensione base: governa ogni valore rem ed em della pagina – i campi, i pulsanti rapidi e la conversione in blocco – quindi passare a una radice di 14px li riscrive tutti in una volta.
- Lascia i bordi da 1px e 2px in px. I bordi sub-pixel possono arrotondarsi a zero ad alcuni livelli di zoom, ed è per questo che la modalità in blocco li salta per impostazione predefinita.
- pt non dipende dalla radice: 24px sono 18pt sia con base 16px sia con base 10px, quindi il campo Punti resta fermo mentre sposti il cursore.
- La modalità in blocco si riesegue ogni volta che sposti il cursore della base: puoi vedere lo stesso foglio di stile con radice 16px e 14px senza incollarlo due volte.
- Ricorri a em solo quando un valore deve seguire la dimensione del carattere del proprio elemento, come il padding di un pulsante attorno all'etichetta, e tieni il resto in rem così nulla si accumula.
Domande frequenti
Dividi il valore in pixel per la dimensione del carattere radice: rem = px / radice. La radice predefinita del browser è 16px, quindi 24px / 16 = 1.5rem e 10px / 16 = 0.625rem. Per rem conta solo la dimensione del carattere dell'elemento radice, per quanto annidato sia l'elemento, ed è esattamente questo a rendere il calcolo prevedibile su un intero foglio di stile.
Con la radice predefinita di 16px, 1rem = 16px, 1.5rem = 24px e 2rem = 32px; qui si moltiplica invece di dividere: px = rem x radice. Se la radice è 14px, come in Ant Design, 1rem scende a 14px e 1.5rem diventa 21px. Un valore in rem non significa nulla senza la sua radice, quindi indica sempre la base accanto.
Una dimensione in px ignora la dimensione del testo scelta dal lettore nel browser: chi ha impostato 20px come valore predefinito riceve comunque i tuoi 14px fissi. rem si misura su quell'impostazione, quindi tutte le dimensioni scalano insieme. Il criterio di successo 1.4.4 di WCAG 2.2 richiede che il testo regga un ingrandimento al 200 %, e una scala tipografica in rem ci riesce senza una sola media query in più.
rem è sempre relativo alla dimensione del carattere dell'elemento html radice. em è relativo alla dimensione del carattere dell'elemento su cui è scritto, tranne nella proprietà font-size stessa, dove si calcola sulla dimensione del genitore. Per questo le dimensioni annidate si accumulano: 0.9em dentro 0.9em dentro 0.9em dà 0.729 dell'originale. rem non si accumula mai, ed è per questo la scelta più sicura per scale tipografiche e spaziature di layout.
Usa rem per spaziature e margini che devono respirare quando il testo cresce: padding dei pulsanti, gutter delle schede, spaziatura delle sezioni. Per le linee sottili resta px: un bordo di 1px rimane nitido, mentre il suo equivalente in rem può arrotondarsi a zero o sfocarsi ad alcuni livelli di zoom. È proprio per questo che la conversione in blocco di questa pagina lascia i valori 1px e 2px in px per impostazione predefinita.
Resta su 16px salvo che un framework imponga altro, perché coincide con il valore predefinito del browser. Ant Design adotta una radice di 14px. Il trucco del 62,5 % imposta html { font-size: 62.5% } così che 1rem = 10px e il calcolo diventi px / 10: 24px sono 2.4rem. Continua a seguire l'impostazione del lettore – il 62,5 % di un valore predefinito di 20px è 12.5px – ma devi poi scrivere body { font-size: 1.6rem }, altrimenti ogni paragrafo viene reso a 10px, e i componenti di terze parti pensati per una radice di 16px risultano troppo piccoli. Tutte e tre le radici sono nella tabella qui sopra.
Leggi il valore nell'inspector e dividilo per la tua radice: un titolo di 28px è 1.75rem con radice 16px, una didascalia di 12px è 0.75rem. Anche il Dev Mode può scrivere rem: apri le impostazioni di Inspect accanto al menu del linguaggio, scegli «Set unit scale» e indica la dimensione del carattere radice (di default 1rem = 16px). Incolla un intero blocco esportato nel campo di conversione in blocco qui sopra per riscrivere tutti i valori in una volta.
Sì, e di solito è meglio. Dentro una media query rem si calcola sulla dimensione iniziale del carattere del browser e non sulla tua regola html, quindi un breakpoint a 48rem equivale a 768px con le impostazioni predefinite e cresce per i lettori che hanno ingrandito il testo. em lì si comporta allo stesso modo. I breakpoint scritti in px restano fissi qualunque cosa scelga il lettore.
No. I browser calcolano lunghezze sub-pixel e le agganciano ai pixel del dispositivo al disegno, quindi 0.9375rem viene reso esattamente come 15px con radice 16px. Arrotondare a 0.94rem lo porta a 15.04px, e l'errore si accumula lungo una griglia o un ritmo verticale. Copia il valore esatto stampato dal convertitore e lascia l'aggancio al browser.
CSS definisce 1px come 1/96 di pollice e 1pt come 1/72, quindi 1px = 0.75pt e 16px = 12pt: è il rapporto dietro la colonna dei punti nella tabella. Il dp di Android è un sistema a parte in cui 1dp = 1px a 160 dpi, ed è per questo che una spaziatura Material di 16dp finisce vicino a 16px sul web anziché a una conversione in rem.