Convertitore px ⇄ rem

A cosa serve

Nel CSS moderno si usano spesso rem ed em al posto dei pixel per layout scalabili e accessibili. Questo strumento fa la conversione al volo, così non devi calcolarla a mente.

Base 16 px

Per impostazione predefinita 1 rem = 16 px (la dimensione di default del testo nei browser). Se hai cambiato il font-size della radice, modifica la base per avere il valore giusto.

rem ed em: la differenza che si paga cara

Sembrano due nomi per la stessa cosa e non lo sono. Il rem è sempre relativo alla radice del documento, quindi 1,5rem vale la stessa misura in qualunque punto della pagina. L'em è relativo al genitore, e quindi si compone: un elemento a 1,2em dentro un altro a 1,2em risulta grande 1,44 volte, e a tre livelli di annidamento 1,73. È il motivo per cui una lista dentro una lista, o un menu dentro un riquadro, escono con il testo che cresce senza che nessuno l'abbia chiesto.

La regola pratica che regge quasi sempre: rem per le dimensioni del testo e per gli spazi della pagina, em solo quando si vuole proprio che una misura segua il testo dell'elemento — per esempio la padding di un pulsante, che così resta proporzionata a qualunque grandezza gli si dia.

Perché non si usano i pixel per il testo

Non è purismo: è che chi ha bisogno di caratteri più grandi cambia la dimensione predefinita del testo nelle impostazioni del browser, e un testo scritto in px non si muove di un pixel. Con i rem, invece, tutta la pagina cresce insieme e resta impaginata. È una delle poche scelte di CSS che ha un effetto diretto su chi ha problemi di vista, ed è anche il motivo per cui le linee guida sull'accessibilità la chiedono.

Per bordi, ombre e linee sottili i pixel vanno benissimo: lì la grandezza non deve seguire il testo, e un bordo da 1px è quello che si vuole davvero.

Il trucco del 62,5%, e perché conviene lasciarlo perdere

Per anni si è scritto html { font-size: 62.5% } in modo che 1rem valesse 10px e i conti si facessero a mente. Funziona, ma ha due difetti: se qualcuno legge quel CSS senza sapere del trucco tutte le misure gli sembrano sbagliate, e soprattutto il testo di base diventa 10px per chi non ha regole più specifiche. Con una pagina come questa il conto non serve farlo a mente, quindi la base può restare quella naturale.

Un dettaglio che sorprende: nelle media query il rem non guarda il font-size che hai scritto tu sulla radice, ma sempre quello predefinito del browser. Un @media (min-width: 40rem) vale 640px anche se hai messo il 62,5%.

Gli strumenti vicini

Per i colori del CSS c'è Convertitore colori, per le ombre Generatore box-shadow e per gli angoli arrotondati Generatore border-radius. Se il CSS va alleggerito prima di pubblicarlo, la pagina è Minifica CSS.