Converti i pixel in rem con qualsiasi base

Il pixel diventa rem con una sola divisione: il numero di pixel diviso per la dimensione del carattere base. Con l’impostazione predefinita del browser quella base vale 16 px, quindi 24 pixel danno 1,5rem e 14 pixel danno 0,875rem. L’unità rem si riferisce alla dimensione del testo dell’elemento html, la radice del documento [1].

È il verso più frequente nel lavoro quotidiano. Il mockup arriva con misure in pixel, perché così contano i programmi di grafica, e il foglio di stile si scrive in rem perché l’impianto risponda alle impostazioni di chi legge.

Il risultato porta quattro decimali, perché con base 16 px un singolo pixel vale esattamente 0,0625rem e le dimensioni del testo producono cifre come 0,875 o 1,125.

Più sotto trovi una tabella con 30 valori su tre basi, come automatizzare la conversione dentro il progetto e una rassegna di proprietà CSS con la risposta su quali passare in rem. Il percorso inverso lo copre il convertitore da rem a pixel.

La formula contiene una sola operazione: rem = pixel ÷ dimensione carattere base. È l’inversa della moltiplicazione che trasforma i rem in pixel.

Esempio con una spaziatura da 20 px: con base 16 viene 20 ÷ 16 = 1,25rem. Lo stesso valore con la base da 10 px della tecnica del 62,5% dà 2rem, perché dividere per dieci si fa a mente.

Le misure di un mockup danno spesso frazioni: 18 pixel sono 1,125rem, 30 pixel sono 1,875rem e 22 pixel sono 1,375rem. Tutte e tre sono esatte e la maggior parte dei design system le conserva così, quindi le scrivi tali e quali nel foglio di stile.

L’unità em si calcola allo stesso modo, dividendo per la dimensione del carattere dell’elemento genitore invece che per quella della radice: quel calcolo lo fa il convertitore da pixel a em. Se la misura finisce sulla carta, lo stesso file lo risolve il convertitore da pixel a pollici.

Per un valore singolo basta il convertitore qui sopra. Per un foglio di stile intero il calcolo passa a uno strumento che lo esegue a ogni build del progetto.

Nel preprocessore scrivi una funzione che divide la cifra per la base. In Sass viene così: @function rem($px) { @return math.div($px, 16) * 1rem; }, e poi nella regola metti padding: rem(24) e ottieni 1.5rem. La base vive allora in un solo posto e si cambia una volta sola.

La seconda via lavora sul foglio già finito e lascia intatto il tuo modo di scrivere. Il plugin postcss-pxtorem, agganciato alla fase di build, percorre il file di uscita e sostituisce i pixel con i rem secondo la base configurata. Negli ultimi 30 giorni il registro npm ne ha contato più di 870.000 download [2].

La terza via sono le variabili CSS. Scrivi --space-6: 1.5rem una volta nel foglio e poi richiami il nome invece della cifra. La conversione avviene allora una sola volta, quando definisci la scala, e non in ogni regola.