Convertire em in px Em ↔ Pixels Gratis Online Sicuro
Scriva un valore in em e lo legga subito in px. Il conto si fa nel suo browser, non si manda nulla da nessuna parte, e da che cosa dipende il risultato è scritto più sotto invece di essere dato per scontato.
Non si carica niente
Misure consuete — Convertire em in px
| em | px |
|---|---|
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
| 2.5 | 40 |
| 3 | 48 |
| 4 | 64 |
Da dove vengono queste unità
Il pixel del CSS non è il pixel del vostro schermo. Quando i display smisero di avere una densità prevedibile, una pagina misurata in pixel veri divenne una pagina che rimpiccioliva man mano che gli schermi si facevano più fini; così il pixel CSS fu ridefinito come lunghezza di riferimento: circa 1/96 di pollice, visto a una comoda distanza di lettura. Tutto il resto di questa pagina poggia su ciò. L'em è più vecchio del web — nei caratteri di piombo era la larghezza di un blocco fuso, chiamato così dalla M maiuscola — e in CSS significa la dimensione del carattere in vigore, per cui cambia quando si annidano gli elementi. Il rem fu aggiunto proprio per sfuggire a questo: è l'em dell'elemento radice e non si compone mai. Il vw è arrivato con il disegno adattivo: un centesimo della larghezza della finestra, qualunque essa sia.
Dove le incontra
Queste sono le unità di ogni foglio di stile. I pixel dimensionano bordi, ombre e tutto ciò che non deve scalare; il rem dimensiona i caratteri, le spaziature e l'impaginazione, sicché una sola modifica alla radice ridimensiona un'intera interfaccia; l'em dimensiona ciò che deve seguire il proprio testo, come l'imbottitura di un pulsante; il vw dimensiona titoli e testate che devono riempire lo schermo su qualunque apparecchio. Convertire fra loro è l'aritmetica quotidiana con cui un progetto consegnato in pixel diventa un foglio di stile che si adatta.
Domande frequenti
Perché 16 px è il punto di partenza abituale?
Perché è la dimensione predefinita del testo in tutti i browser principali, e un foglio di stile che non la sovrascrive la eredita. Un rem vale quindi 16 px con l'impostazione predefinita, e di lì vengono le conversioni familiari: 0,5 rem sono 8 px, 1,5 rem sono 24 px. Se un utente ha ingrandito il valore predefinito nelle impostazioni, gli stessi valori in rem crescono con esso — che è esattamente lo scopo di usarli.
Devo usare rem o em?
Rem per tutto ciò che deve seguire la pagina nel suo insieme — scala tipografica, spaziature, larghezze d'impaginazione — perché si misura dalla radice e non si accumula mai. Em per tutto ciò che deve seguire il testo in cui sta: l'imbottitura di un pulsante, lo spazio accanto a un'icona, il rientro di una citazione. L'errore comune è annidare elementi dimensionati in em: 1,2 em dentro 1,2 em diventa 1,44, poi 1,73, finché il testo in fondo alla pagina è grande il doppio del previsto.
Il risultato è esatto?
Dove le due unità si definiscono l'una per mezzo dell'altra con numeri interi, sì: la pagina lo dice sopra la cifra, e l'unico arrotondamento sta in quante cifre si mostrano. Dove il rapporto non ha decimale finita, la pagina mostra dodici cifre significative e dice che la relazione è approssimata invece di fingere il contrario.
Qualcosa di quel che scrivo lascia il mio dispositivo?
No. Il calcolo avviene nel suo browser; non viene inviato nulla, e non c'è nemmeno un server a cui inviarlo. Caricata una volta, la pagina continua a funzionare con la rete spenta.
Perché si converte em in px
Un foglio di stile dice margin-bottom: 0.75em su un titolo, e padding: 0.4em 0.9em su un pulsante, e un line-height di 1.3em su un blocco di testo. Sono valori buoni e flessibili, ed è quasi impossibile immaginarli. Quanti pixel è quel margine? Il riempimento del pulsante corrisponde ai 6 px e ai 14 px del file di progetto? Per scoprirlo converti em in px: moltiplichi per la dimensione del carattere a cui l'em si riferisce, e leggi la risposta nell'unità che usano gli strumenti di progettazione. È una domanda che gli sviluppatori si fanno quando rivedono il codice, controllano una build rispetto a un mockup, correggono un problema di spaziatura o consegnano un componente finito a qualcuno che ragiona in pixel.
L'em è l'unità più insidiosa di CSS da convertire, perché non ha un valore fisso. Un em è la dimensione del carattere in vigore dove il valore viene usato o, per la proprietà font-size stessa, quella del genitore. Quindi 1,5 em potrebbe essere 24 px in un punto e 36 px in un altro, nello stesso foglio di stile, dalla stessa regola. Il convertitore perciò non tira a indovinare. Chiede la dimensione del carattere a cui l'em si riferisce, la mostra accanto alla risposta e calcola con essa. Se non conosci la dimensione, le sezioni qui sotto spiegano come trovarla nel tuo browser.
Il calcolo avviene nel tuo browser e nulla viene caricato. Qui sotto trovi la formula, come trovare la base giusta, che cosa la conversione conserva e non può conservare, come si moltiplicano i valori em annidati, quando gli sviluppatori hanno bisogno di convertire em in px e alcune abitudini che mantengono comprensibile un foglio di stile basato su em.
La formula e la base
px è uguale a em moltiplicato per la dimensione del carattere
La formula è una sola moltiplicazione: px = em × base. Con una base di 16 px, 1,5 em diventano 24 px, 0,75 em diventano 12 px e 2 em diventano 32 px. La pagina stampa la base accanto al risultato, quindi una riga come 1,5 em = 24 px (16 px) dice esattamente che cosa è stato presupposto. Se la dimensione del carattere dell'elemento è 20 px, scrivi 20, e 1,5 em diventano 30 px.
Trovare la base nel tuo browser
Apri gli strumenti per sviluppatori, seleziona l'elemento e guarda la sua dimensione del carattere calcolata. È il numero da scrivere nel campo della base per qualsiasi proprietà diversa da font-size. Per font-size stessa, seleziona invece il genitore e leggi la sua dimensione calcolata. Ci vogliono pochi secondi e toglie del tutto il bisogno di indovinare.
Quando non vedi la pagina
Se leggi il codice senza la pagina, segui la catena delle dimensioni dei caratteri verso l'alto a partire dall'elemento: il suo font-size se ne ha uno, altrimenti quello del genitore, e così via fino alla radice, che è 16 px a meno che il foglio di stile o il lettore l'abbiano cambiata. Dove una dimensione è data in em, moltiplica lungo la catena. È noioso, ed è per questo che la maggior parte dei team si accontenta di rem per le dimensioni dei caratteri.
Che cosa conserva la conversione e che cosa no
Conserva la proporzione rispetto al testo
Il risultato è la dimensione in pixel che l'em rappresenta alla base che hai scritto. Scritto in em, uno spazio o una dimensione segue il testo a cui appartiene, e la conversione mostra a quanto corrisponde per una particolare dimensione del testo.
Non può darti un'unica risposta per la pagina
Questo è il punto a cui fare attenzione: l'em è relativo alla dimensione del carattere dell'elemento stesso, o, per font-size, del suo genitore, non della radice. Quindi lo stesso 1,5 em è 24 px dentro un elemento da 16 px e 36 px dentro uno da 24 px, e em dentro em si moltiplica. La cifra sulla pagina è giusta per la base nel campo e per nient'altro. Se vuoi un solo numero valido ovunque, è a questo che serve il rem. Per confrontare i due, converti rem in px e guarda come un'unità relativa alla radice resti fissa.
Arrotondamento
Moltiplicare per una base intera dà risultati esatti per la maggior parte dei valori. Se la base è decimale, per esempio 13,5 px, un valore come 1,2 em dà 16,2 px. I browser gestiscono i pixel frazionari, ma quando servono pixel interi, per un bordo sottilissimo o un'icona su una griglia, arrotonda deliberatamente e controlla l'aspetto.
Come si moltiplicano i valori em annidati
Un elenco dentro un elenco
Prendi una pagina il cui testo del corpo è 16 px. Un elenco ha font-size: 0.875em, che sono 14 px. Anche le voci al suo interno hanno font-size: 0.875em, che sono 14 × 0,875 = 12,25 px. Un elenco dentro una voce lo fa di nuovo: 10,7 px. A tre livelli di profondità il testo è minuscolo, e nessuno ha deciso che dovesse esserlo. Quando converti em in px per un componente e la risposta sembra troppo piccola, l'annidamento è la prima cosa da controllare.
Risalire la catena
Per conoscere la vera dimensione in pixel di un em annidato, moltiplica la base per ogni valore scendendo: 16 × 0,875 × 0,875 = 12,25. Il convertitore fa un passo alla volta. Per una catena, converti il primo valore, usa la risposta come base per il secondo e continua. È la stessa aritmetica che esegue il browser.
Come impedire che si accumuli
Usa il rem per le dimensioni dei caratteri, così che ogni dimensione si riferisca alla radice, e tieni l'em per la spaziatura, così che riempimenti e margini seguano il testo del proprio elemento. In quella combinazione nulla si accumula, e i valori em che converti sono sempre relativi a una dimensione del carattere che puoi leggere subito.
Valori comuni
La tabella in fondo alla pagina
La pagina include una tabella dei valori in pixel a cui corrispondono le cifre em più comuni alla base che hai impostato: 0,5 em sono 8 px, 0,625 sono 10, 0,75 sono 12, 0,875 sono 14, 1 sono 16, 1,125 sono 18, 1,25 sono 20, 1,5 sono 24, 2 sono 32, 3 sono 48 e 4 sono 64. Alla base predefinita sono gli stessi numeri del rem. Cambia la base e la tabella cambia con essa, che è un buon modo per vedere che cosa fa davvero l'em.
Prova due basi affiancate
Scrivi 1,5 con una base di 14, poi con una base di 20. Ottieni 21 e 30 pixel. Ecco l'intera differenza tra em e rem in un solo esperimento: la stessa cifra, due elementi, due dimensioni.
Come convertire em in px qui
Scrivi il valore in em
Inserisci la dimensione in em nel primo campo. I decimali sono accettati, quindi 0,714 funziona come 1.
Imposta la dimensione del carattere a cui l'em si riferisce
Scrivi la dimensione del carattere dell'elemento, o del suo genitore se la proprietà è font-size. Se non sei sicuro, lascia 16 e tratta il risultato come un'approssimazione.
Leggi il valore in pixel
La risposta appare subito, con la base mostrata accanto. Copiala nei tuoi appunti o confrontala con il file di progetto.
Da dove vengono queste unità
L'em
L'em è più antico del web. Nei caratteri di piombo era la larghezza di un blocco fuso, che prende il nome dalla lettera maiuscola M, e i tipografi parlano ancora di trattini em e spazi em. In CSS significa la dimensione del carattere in vigore, ed è per questo che cambia quando annidi gli elementi.
Il pixel e il rem
Quando gli schermi smisero di avere una densità prevedibile, una pagina misurata in pixel reali divenne una pagina che si rimpiccioliva man mano che gli schermi diventavano più nitidi. Così il pixel CSS fu ridefinito come lunghezza di riferimento: circa 1/96 di pollice visto a una comoda distanza di lettura. Il rem fu aggiunto per sfuggire all'accumulo dell'em: è l'em dell'elemento radice e non si moltiplica mai. Se lavori con entrambi, converti px in em per andare nell'altra direzione.
Quando gli sviluppatori convertono em in px
Controllare una build rispetto a un file di progetto
Un designer consegna un file in pixel, e il codice è in em. Per controllare che la pagina corrisponda, converti em in px usando la dimensione del carattere di ogni componente. Un pulsante con un'etichetta da 14 px e un riempimento di 0.714em 1.429em dovrebbe risultare di 10 px e 20 px, e se il progetto dice 12 e 24, uno dei due è sbagliato.
Correggere la spaziatura
Quando uno spazio sembra troppo grande o troppo piccolo, la causa è di solito un valore em che si riferisce a un carattere più grande o più piccolo di quanto ti aspettavi. Convertirlo con la dimensione del carattere calcolata dell'elemento ti dice subito se il problema è l'aritmetica.
Leggere codice sconosciuto
I fogli di stile ereditati sono pieni di valori em di cui devi ricostruire le dimensioni in pixel. Convertire una manciata dei principali, con le basi giuste, ti dà una mappa del progetto.
Scrivere documentazione e test
Chi collauda una pagina descrive ciò che vede in pixel. Uno sviluppatore che dice che il riempimento è 0,9em significa poco per un collaudatore; 12,6 px significa qualcosa. Convertire fa capire le due parti l'una all'altra.
Trappole quando converti em in px
Usare la base sbagliata
L'errore più comune. Per font-size usa la dimensione del genitore; per tutte le altre proprietà, quella dell'elemento stesso. Controlla la proprietà prima di scrivere la base.
Dimenticare un genitore in em
Se la dimensione del genitore è a sua volta in em, devi seguire la catena. Usa il valore calcolato dagli strumenti per sviluppatori per abbreviare.
Dare per scontato che lo schermo mostri gli stessi pixel
Un pixel CSS non è un pixel del dispositivo. Su uno schermo ad alta densità un pixel CSS può essere due o tre pixel del dispositivo. La conversione dà pixel CSS, l'unità che gli strumenti di progettazione e il foglio di stile condividono.
Prendere la risposta per una promessa
Se il lettore ingrandisce il testo o il componente viene riutilizzato con un'altra dimensione del carattere, i pixel cambiano, come devono. Il numero convertito descrive una situazione, non tutte.
Domande che si fanno prima di convertire
Quanti pixel è 1 em?
Tanti quanti la dimensione del carattere in vigore: 16 px per il normale testo del corpo alla base predefinita, 24 px dentro un elemento da 24 px.
Quanti pixel sono 2 em?
Il doppio della dimensione del carattere in vigore. A 16 px sono 32 px.
Perché il mio browser mostra qualcosa di diverso?
La reale dimensione del carattere dell'elemento è diversa dalla base che hai scritto. Leggi la dimensione del carattere calcolata negli strumenti per sviluppatori.
L'em è uguale al rem?
No. L'em è relativo all'elemento, il rem alla radice.
Il mio numero viene caricato?
No. L'aritmetica gira nel tuo browser e nulla viene inviato da nessuna parte.
Come torno indietro?
Con da px a em, che divide invece di moltiplicare.
Abitudini che mantengono comprensibile un foglio di stile in em
Commenta la base
Una riga come padding: 0.75em 1.25em; /* 12px 20px at 16px */ costa pochi caratteri e risparmia una conversione al lettore successivo. Registra la base che hai presupposto.
Imposta la dimensione del carattere una volta per componente
Definisci la dimensione del carattere del componente sul suo elemento radice, e riferisciti ad essa con em all'interno. La base è allora la stessa per ogni valore del componente, e puoi convertire em in px rispetto ad essa con fiducia.
Tieni l'em per la spaziatura, il rem per i caratteri
È la divisione su cui si assestano la maggior parte dei fogli di stile, e mantiene semplice l'aritmetica. Per le dimensioni relative allo schermo, da px a vw e da vw a px sono gli strumenti.
Prova con un'altra dimensione del testo
Aumenta la dimensione predefinita del testo nel tuo browser e guarda la pagina. Se la spaziatura segue il testo, i valori em funzionano. Se no, qualcosa è stato lasciato in pixel.
Un metodo per i casi scomodi
Lavora da fuori verso dentro
Quando un componente è in profondità dentro altri e i suoi valori em sembrano confusi, parti dall'elemento più esterno di cui conosci la dimensione e procedi verso l'interno, convertendo un livello alla volta. Scrivi ogni dimensione in pixel in un appunto man mano. Dopo due o tre livelli l'intera catena è su carta, e puoi vedere esattamente da dove viene un numero sorprendente. Richiede un minuto e sostituisce un'ora di tentativi.
Decidi se semplificare
Se devi convertire em in px attraverso quattro livelli per capire un'impaginazione, il foglio di stile ti sta dicendo qualcosa. Valuta di spostare le dimensioni dei caratteri su rem, così che ciascuna si riferisca alla radice, e di lasciare in em solo la spaziatura. La pagina avrà lo stesso aspetto e sarà molto più facile da leggere l'anno prossimo.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare a em, usa da px a em. Per le dimensioni relative alla radice ci sono da px a rem e da rem a px, e per quelle relative allo schermo, da px a vw e da vw a px. Per i colori dello stesso foglio di stile, da HEX a RGB e da RGB a HEX gestiscono le notazioni.
Un esempio svolto
Supponi di rivedere un componente pulsante. L'etichetta è 14 px, il CSS dice padding: 0.714em 1.429em e uno spazio di 0.5em tra un'icona e l'etichetta. Scrivi 14 come base, poi 0,714 e leggi 10 px, 1,429 e leggi 20 px, 0,5 e leggi 7 px. Il file di progetto dice 10, 20 e 8. Due su tre corrispondono, quindi guardi lo spazio: 8 px a una base di 14 sarebbero 0,571 em, e qualcuno l'ha arrotondato a 0,5. Lo segnali nella revisione, e la correzione è un solo numero.
Una breve lista di controllo
Prima di convertire
Trova la dimensione del carattere a cui si riferisce l'em, dagli strumenti per sviluppatori o dalla catena di dimensioni dei caratteri nel codice.
Durante la conversione
Scrivi il valore in em, imposta la base e leggi i pixel, notando la base mostrata accanto al risultato.
Dopo la conversione
Confronta con il file di progetto. Se i numeri differiscono, controlla la base prima di sospettare del codice.
Errori comuni
Usare 16 senza controllare
È giusto solo quando la dimensione del carattere dell'elemento è 16 px.
Confondere em con rem
Si somigliano e si comportano in modo diverso. Usa la pagina giusta per ciascuno.
Dimenticare che l'em si accumula
Un valore dentro un elemento annidato è relativo a una dimensione che potresti non aver visto. Segui la catena.
I tuoi numeri restano sul tuo dispositivo
Il calcolo avviene in locale. I tuoi valori sono usati dal tuo browser e nulla viene inviato da nessuna parte. Non c'è nulla da eliminare dopo e nessun account da creare. È il modo semplice di convertire em in px.
Riepilogo
Per convertire em in px qui, scrivi la dimensione in em e la dimensione del carattere a cui si riferisce, e leggi subito il risultato in pixel, usando la formula px = em × base. La conversione conserva la proporzione rispetto alla dimensione del carattere in vigore dove il valore viene usato. Non può dare un'unica risposta per una pagina: l'em è relativo all'elemento stesso, o al genitore per font-size, quindi lo stesso 1,5 em è 24 px dentro un elemento da 16 px e 36 px dentro uno da 24 px, e em dentro em si moltiplica. Per un solo numero valido ovunque, usa il rem. Nulla viene caricato.