Il convertitore da PX a REM, esegue questa divisione. Il campo della dimensione radice parte da 16, ma non legge il tuo foglio di stile. Controlla la base prima di convertire una dimensione del carattere o una spaziatura.
Trovare la dimensione del carattere radice della pagina
Un rem fa riferimento alla dimensione del carattere dell’elemento radice, di solito html. Il valore 16 px è comune, ma non universale: gli stili del sito e le preferenze del browser possono modificarlo. MDN spiega il riferimento dell’unità rem, in inglese.
- Apri la pagina del tuo progetto nel browser. Ispeziona l’elemento html con gli strumenti per sviluppatori.
- Nel pannello degli stili calcolati, trova font-size e annota il valore in pixel. Non usare il valore di body o del titolo che vuoi convertire.
- In alternativa, esegui getComputedStyle(document.documentElement).fontSize nella console della stessa pagina. Il risultato “20px” significa che devi usare una base di 20 nel convertitore.
- Controlla di nuovo il valore se una regola responsive o un’impostazione modifica la dimensione radice. La misura descrive la pagina nello stato attuale.
Questo metodo usa gli stili effettivamente applicati, come spiega la documentazione di getComputedStyle, in inglese.
Convertire e applicare il valore
- Inserisci 24 nel campo “Valore in pixel CSS”, senza aggiungere px.
- Inserisci la base misurata, per esempio 16. La base deve essere strettamente positiva; il valore da convertire può essere zero, ma non negativo.
- Avvia la conversione. Lo strumento mostra “24px ÷ 16px = 1.5rem”. Per una dichiarazione CSS, usa solo 1.5rem, per esempio “font-size: 1.5rem;”.
- Controlla il risultato sulla pagina. Se la dimensione radice è 20 px, usa il risultato 1.2rem per ottenere 24 px. Mantenere 1.5rem produrrebbe invece 30 px.
Il CSS richiede il punto decimale: scrivi 1.5rem, non 1,5rem, anche se il formato numerico locale usa la virgola. I pixel di questa conversione sono pixel CSS, non i pixel fisici dello schermo. Non applicare un moltiplicatore basato sulla densità di pixel. MDN spiega questa distinzione, in inglese.
Capire la differenza tra rem ed em
Le unità rem permettono ai componenti di condividere un riferimento comune. Le unità em seguono la dimensione del carattere dell’elemento; in una dichiarazione font-size, seguono quella del genitore. Le dimensioni del testo in em possono quindi moltiplicarsi quando gli elementi sono annidati. Scegli em se vuoi questa dipendenza dal componente, oppure rem se vuoi un riferimento alla radice. Il modulo CSS Values and Units, in inglese, definisce queste unità.
Evitare errori di base e precisione
Non cambiare la dimensione del carattere radice solo per far tornare un calcolo: modificheresti anche le dimensioni esistenti espresse in rem. Correggi invece la base inserita e ricalcola.
Il risultato viene arrotondato a un massimo di sei cifre decimali. Per esempio, 17 px con una dimensione radice di 18 px danno 0.944444rem. Gli zeri finali superflui non vengono mantenuti.
Un valore molto piccolo può scomparire dal risultato visualizzato: 0.000001 px ÷ 16 produce 0rem dopo l’arrotondamento. Non significa che il quoziente matematico sia zero. Controlla prima di sostituire un valore molto piccolo nel CSS. I numeri non finiti e i risultati fuori dall’intervallo numerico supportato vengono rifiutati.
Verificare anche il ridimensionamento del testo
Usare rem non garantisce l’accessibilità. Prova lo zoom fino al 200%, insieme all’ingrandimento del testo e alle preferenze dei caratteri: titoli, pulsanti e campi devono restare leggibili e utilizzabili. Fai attenzione al testo tagliato o sovrapposto nei contenitori di dimensioni fisse. Una dimensione in px non è automaticamente inaccessibile: anche lo zoom dell’intera pagina la ingrandisce. Il criterio WCAG 1.4.4, in inglese, riguarda il ridimensionamento senza perdita di contenuti o funzionalità, non l’obbligo di usare una determinata unità.
Domande frequenti
A quanti rem corrispondono 16 px?
A 1rem con una dimensione radice di 16 px; a 0.8rem con una dimensione radice di 20 px. Per rispondere devi conoscere la base.
Devo convertire in rem ogni valore in px?
No. Scegli l’unità in base al comportamento desiderato: seguire la tipografia della radice, seguire quella del componente oppure mantenere una lunghezza CSS indipendente dal carattere.
Perché il mio risultato è diverso da quello del convertitore?
Controlla la dimensione del carattere calcolata per html, eventuali regole CSS che sovrascrivono la tua dichiarazione e l’arrotondamento. Il convertitore calcola soltanto a partire dai due valori forniti.