Convertire px in rem

Scrivi un valore in qualsiasi unità e ottieni la sua equivalenza nelle altre. Per impostazione predefinita 1rem = 16px, la dimensione del carattere dei browser; cambiala se il tuo CSS ne usa un'altra. Puoi anche incollare un blocco di CSS e convertire tutti i suoi px in rem in una volta.

Convertitore di unità

px
px
px
rem è relativo alla dimensione del carattere dell'elemento radice (html); em e % a quella dell'elemento padre; 1pt = 1/72 di pollice = 1,333px; 1vw = 1% della larghezza della finestra.

Tabella di equivalenze

pxremempt%

Convertire un blocco di CSS da px a rem

px, rem ed em: quale usare?

Il pixel (px) è una misura fissa. rem («root em») è relativo alla dimensione del carattere dell'elemento html, che in tutti i browser è 16px a meno che l'utente non la cambi: per questo 1rem = 16px, 1,5rem = 24px e 0,875rem = 14px. em è relativo alla dimensione del carattere dell'elemento padre, quindi si accumula annidando gli elementi.

Usare rem per dimensioni del testo, margini e spaziature rispetta le impostazioni di chi ingrandisce il carattere del browser per problemi di vista, come raccomandano le linee guida di accessibilità WCAG. I px restano pratici per bordi sottili e ombre.

Formula per passare da px a rem

rem = px ÷ dimensione di base. Con la base predefinita di 16px: 24px ÷ 16 = 1,5rem. E al contrario, px = rem × 16. Alcuni progetti impostano html { font-size: 62.5%; } perché 1rem valga 10px e i calcoli siano più semplici; in quel caso scrivi 10 come dimensione di base.

vw e vh sono l'1% della larghezza e dell'altezza della finestra: utili per la tipografia fluida insieme a clamp(), ad esempio font-size: clamp(1rem, 2.5vw, 2rem).