nicetool.dev logo

Convertitore da PX a REM

Scrivi in uno dei due campi. Clicca una riga della tabella per caricarla o incolla del CSS sotto per convertirlo tutto.

24px = 1.5rem = 18pt = 150%

Tabella di conversione (base 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

Converti uno snippet CSS

6 valori convertiti
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

Che differenza c'è tra px e rem?

Il px è un'unità CSS fissa, mentre 1rem corrisponde alla dimensione del font dell'elemento radice html, 16px di default in ogni browser. Usare rem per testo, spaziature e layout fa sì che tutto si ingrandisca insieme quando l'utente aumenta la dimensione predefinita del font nelle impostazioni del browser, un requisito di accessibilità importante (WCAG 1.4.4, Ridimensionamento del testo). Il calcolo è semplice: rem = px / font radice, quindi 24px sono 1,5rem con base 16px. L'em funziona allo stesso modo ma rispetto al font dell'elemento padre, e si somma quando gli elementi sono annidati.

Funzionalità

  • • Conversione px e rem nei due sensi con font radice personalizzato
  • • Mostra anche gli equivalenti in pt e percentuale
  • • Tabella cliccabile delle misure comuni da 1px a 128px
  • • Conversione in blocco di tutti i px di uno snippet CSS
  • • Opzione per mantenere in px i bordi sottili da 1px

Funziona in locale

Tutte le conversioni avvengono nel browser, compreso il CSS che incolli. Non viene caricato nulla.

Calcolo istantaneo, 100% lato client.

Come usare: Da PX a REM

  1. 1

    Controlla la dimensione del font radice: lascia 16px a meno che il progetto non imposti html { font-size } a un altro valore, come 10px o 62,5%.

  2. 2

    Scrivi un valore nel campo px per ottenere i rem, o nel campo rem per ottenere i px. La riga sotto mostra anche pt e percentuale.

  3. 3

    Clicca una riga qualsiasi della tabella per caricare le misure comuni da 1px a 128px.

  4. 4

    Incolla un blocco di CSS nel convertitore in blocco: ogni px diventa rem, 0px diventa 0 e i bordi da 1px possono restare in px. Copia il risultato nel foglio di stile.

Esempi pratici

Scala tipografica

Una scala da 14 / 16 / 20 / 24 / 32px diventa 0,875 / 1 / 1,25 / 1,5 / 2rem, così i titoli crescono quando l'utente ingrandisce il testo nel browser.

Migrare un vecchio foglio di stile

Incolla il CSS legacy in px e converti in un colpo padding, margini e dimensioni dei font, poi rivedi le media query e lascia in px i bordi sottili.

Seguire un design Figma

I designer consegnano le misure in px. Converti token di spaziatura come 4, 8, 12, 16 e 24px in 0,25, 0,5, 0,75, 1 e 1,5rem per un design system.

Il trucco del 62,5%

Alcuni progetti usano html { font-size: 62.5% } perché 1rem = 10px. Imposta 10 come radice e 24px diventano semplici 2,4rem.

Domande frequenti

Uso rem o px?+

Usa rem per le dimensioni dei font e la maggior parte delle spaziature, così il layout rispetta la preferenza dell'utente. I px vanno ancora bene per bordi, ombre e dettagli fini.

Che differenza c'è tra rem ed em?+

rem dipende dal font dell'elemento html ed è prevedibile. em dipende dall'elemento padre, quindi gli em annidati si moltiplicano: utile nei componenti, ma facile sbagliare.

La base è sempre 16px?+

È il valore predefinito in ogni browser, ma l'utente può cambiarlo e il tuo CSS può sovrascriverlo su html. Converti sempre con la dimensione radice che il progetto usa davvero.

Le media query devono usare rem?+

Le media query in em o rem si basano sul font predefinito del browser, non sulla tua regola html, e si adattano quando l'utente ingrandisce il testo. Per questo molti team usano em nelle media query.