Softonic

Convertitore da EM a REM

Passaggio 1 / 2 rem
Risultati

Un designer ti invia specifiche Figma in pixel, il codice utilizza rem e metà dei componenti annidano em in posti dove si spostano in base alla dimensione del font del genitore. Questo convertitore calcola gli equivalenti in px e rem di qualsiasi valore em a qualsiasi dimensione del font radice, così puoi copiare il numero giusto nel file CSS senza dover ricalcolare nella tua testa ogni volta.

Come convertire em, rem e pixel

  1. 1

    Imposta la dimensione del font di base

    Di solito 16px, il valore predefinito del browser. Alcuni sistemi di design utilizzano 14px o 18px come radice.

  2. 2

    Per em, imposta la dimensione del font del genitore

    em è relativo all'elemento genitore. Se il genitore è 20px, 1em equivale a 20px.

  3. 3

    Inserisci un valore

    In em; gli equivalenti in px e rem si aggiornano automaticamente.

  4. 4

    Leggi la conversione

    Valori px, em e rem con decimali arrotondati e esatti mostrati.

Le formule

rem è sempre relativo all’elemento radice (<html>):

px = rem * root_font_size rem = px / root_font_size

em è relativo al genitore dell’elemento corrente:

px = em * parent_font_size em = px / parent_font_size

Conversioni a 16px di radice

Pixel rem em (con genitore a 16px)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Quando usare ciascuno

  • px: bordi, dettagli fini, controllo esatto. Ombra del box a 1px, bordo a 1px.
  • rem: margini, padding, tipografia che dovrebbe scalare con la preferenza del font dell’utente.
  • em: spaziatura locale al componente che si adatta alla propria dimensione del font (pulsanti, badge).
  • % e vw/vh: relativi al contenitore e alla viewport, conversazione separata.

Il trucco del 62.5%

Alcuni codici impostano html { font-size: 62.5%; } il che rende 1rem = 10px. Questo rende facile la matematica rem (24px = 2.4rem) a scapito di rompere le preferenze di dimensione del font del browser per gli utenti che ingrandiscono il testo. La pratica moderna evita questo hack; usa 16px di radice e tollera i decimali.

Trappola dell’eredità em

em eredita attraverso la cascata. Se un genitore ha una dimensione del font di 1.2em rispetto al proprio genitore, e all’interno hai un padding di 1em, il padding è 1.2 * 1.2 = 1.44 * radice. Gli em annidati si accumulano, il che può produrre risultati sorprendenti. Rem evita questo perché si risolve sempre contro <html>.

Esempio di scala tipografica

Una comune scala tipografica modulare con rapporto 1.25:

Livello rem px (a 16 di radice)
Didascalia 0.75 12
Corpo 1 16
Corpo+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
In evidenza 3.052 ~49

Usare rem significa che ogni livello scala proporzionalmente se un utente aumenta la dimensione del font del browser per l’accessibilità.

Rispettare le preferenze degli utenti

Codificare px in un foglio di stile rompe gli utenti che ingrandiscono il testo per motivi di visione. rem rispetta queste preferenze perché si risolve contro la dimensione radice, che l’utente può cambiare. Questo è il motivo principale per cui le guide di stile raccomandano rem per tipografia e spaziatura.

Domande frequenti

Usa rem per tipografia, spaziatura e dimensionamento del layout. Usa em per dimensionamenti interni al componente che dovrebbero scalare con la dimensione del font del componente stesso (pulsanti, icone all’interno del testo). Usa px solo per dettagli fini che non devono scalare.

Gli utenti possono cambiare la dimensione del font predefinita del loro browser. Chrome ha come predefinito 16px; se l’utente imposta 18px, tutti i tuoi rem sono più grandi del 12.5 percento. I designer che assumono una radice fissa di 16px spesso trascurano questo; rem rispetta la scelta, che è il punto.

La scala di spaziatura di Tailwind utilizza rem. text-base è 1rem = 16px di default, text-lg è 1.125rem. La scala è coerente e rispetta la dimensione del font radice di default.

No. I numeri inseriti servono solo a calcolare la conversione e non viene salvato nulla.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Semplificatore di Algebra Booleana

Valuta un'espressione booleana per ogni combinazione di input e mostra la tabella della verità completa. Supporta fino a cinque variabili e gli operatori &, |, ! e ^.

Strumento disponibile in altre lingue