Il rem nei CSS

Un simpatico repertorio di consigli per i tuoi CSS

Il rem è una unità di misura relativa utilizzata in CSS per dimensionare elementi all'interno delle pagine HTML. A differenza del "px" (pixel) che è una misura fissa e assoluta, il "rem" è basato sulle dimensioni del font radice (root) definito nel tag del documento HTML.

Quando si utilizza il "rem" come unità di misura, il valore specificato rappresenta il numero di volte che il font radice deve essere moltiplicato per ottenere la dimensione finale dell'elemento. Ad esempio, se il font radice è impostato a 16px e si applica la regola font-size: 1.5rem; a un elemento, la dimensione finale del testo sarà di 24px (16px * 1.5).

La principale caratteristica del "rem" è che è scalabile e si adatta alle dimensioni del font radice. Se si modifica il valore del font radice (ad esempio impostandolo a 20px), tutti gli elementi che utilizzano "rem" come unità di misura si adatteranno di conseguenza. Ciò rende il "rem" particolarmente utile per creare design responsivi, in cui le dimensioni degli elementi si adattano automaticamente alle dimensioni del dispositivo e del font impostato dagli utenti.

Esempio:

p {font-size: 1.5rem;}