Come si usa
- Imposta la dimensione del font radice se il tuo sito la modifica (per esempio, html { font-size: 62.5% } la imposta su 10px).
- Inserisci un valore in uno dei due campi per convertire da px a rem o da rem a px. Passa a em se vuoi usare come riferimento un elemento genitore.
- Usa la tabella per consultare rapidamente i valori oppure incolla uno snippet CSS per convertire tutte le lunghezze in px in una volta e copiare il risultato.
Come funziona
rem = px ÷ dimensione del font radice. Con la dimensione radice predefinita di 16px, 24px corrispondono a 1.5rem e 14px a 0.875rem. em usa la stessa formula, ma con la dimensione del font dell'elemento genitore: per questo i valori em annidati si moltiplicano. rem evita questo problema perché fa sempre riferimento alla radice.
Usare rem per le dimensioni dei caratteri e la spaziatura consente al testo di ridimensionarsi quando qualcuno aumenta la dimensione del font predefinita nelle impostazioni del browser, aiutando le persone ipovedenti. I valori vengono arrotondati a quattro cifre decimali.
Il convertitore di snippet modifica i numeri seguiti da px. Lascia invariati i commenti, url(…) e le stringhe tra virgolette, mantiene 1px se richiesto (di solito i bordi sottilissimi dovrebbero restare di 1px), scrive 0px come 0 e, per impostazione predefinita, lascia invariate le condizioni @media e @container, perché nelle media query rem ed em fanno sempre riferimento alla dimensione del font iniziale del browser, indipendentemente dalla dimensione del font radice impostata. Non interpreta la semantica di calc() oltre a sostituire i numeri px al suo interno: è comunque corretto, perché ogni lunghezza viene convertita singolarmente.
Esempi
Dimensione radice predefinita
Con una radice di 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Il trucco del 62,5%
Se nel CSS imposti html { font-size: 62.5% }, la radice è di 10px, quindi 14px = 1.4rem e 24px = 2.4rem. Imposta il campo della dimensione del font radice su 10.
Conversione di un componente
padding: 24px 16px; border: 1px solid #ddd; diventa padding: 1.5rem 1rem; border: 1px solid #ddd; con l'opzione “Mantieni i valori 1px” attivata.
Domande frequenti
È meglio usare rem o em?
Usa rem per la maggior parte delle dimensioni dei caratteri, della spaziatura e del layout, perché si comporta in modo prevedibile ovunque. Usa em quando un elemento deve ridimensionarsi in base alla dimensione del testo del proprio componente, per esempio per la spaziatura interna di un pulsante.
Perché non convertire le media query in rem?
Puoi farlo, ma in una media query 1rem corrisponde sempre alla dimensione del font predefinita del browser (di solito 16px), non alla dimensione del font di html. Per questo il convertitore le ignora per impostazione predefinita; disattiva l'opzione se vuoi comunque dividere per 16.
rem è più accessibile di px?
Per le dimensioni dei caratteri, sì: rem rispetta l'impostazione predefinita della dimensione del font dell'utente, mentre le dimensioni in px la ignorano. Lo zoom del browser funziona con entrambe le unità.
Privacy
Le conversioni e lo snippet CSS vengono elaborati nel browser e non vengono mai inviati altrove.