Convertire px in em Pixels ↔ Em Gratis Online Sicuro
Scriva un valore in px e lo legga subito in em. 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 px in em
| px | em |
|---|---|
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 48 | 3 |
| 64 | 4 |
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 px in em
L'em è l'unità relativa più antica del CSS e quella che causa più discussioni. Hai una dimensione in pixel da un file di design, 20 px di padding su un pulsante, 14 px di spazio accanto a un'icona, 36 px per un titolo, e la vuoi in em, in modo che segua il testo a cui appartiene. Quando converti px in em fai una domanda precisa: di quale multiplo della dimensione del carattere corrente si tratta? La risposta dipende da un numero che la pagina non può indovinare, la dimensione del carattere in vigore dove il valore viene usato, quindi il convertitore mette quel numero in un campo e lo usa apertamente.
Il motivo per scrivere le dimensioni in em è che le cose che appartengono al testo dovrebbero crescere con il testo. Il padding dentro un pulsante dovrebbe essere più grande quando l'etichetta del pulsante è più grande. Lo spazio tra un'icona e la sua didascalia dovrebbe allargarsi quando lo fa la didascalia. Il margine inferiore di un titolo dovrebbe restare in proporzione al titolo. In tutti questi casi il valore in pixel è sbagliato appena cambia la dimensione del carattere, e il valore in em è giusto a qualsiasi dimensione. È tutto il caso a favore dell'em, ed è un caso forte.
Il calcolo avviene nel tuo browser, e nulla viene caricato. Più sotto trovi la formula, il motivo per cui l'em richiede più cura del rem, la trappola dell'annidamento che produce dimensioni sorprendenti, i posti in cui l'em è l'unità giusta e un metodo per scegliere tra em e rem in un foglio di stile reale.
La formula e la base
em è uguale a px diviso la dimensione del carattere
La formula è una divisione: em = px ÷ base. Con una base di 16 px, un valore di 24 px diventa 1,5 em, 8 px diventa 0,5 em e 20 px diventa 1,25 em. La pagina mostra la base accanto al risultato, come in 24 px = 1,5 em (16 px), così puoi vedere cosa è stato presupposto. L'aritmetica è la stessa del rem. Il significato è diverso.
Cos'è la base
Per il rem, la base è la dimensione del carattere dell'elemento radice. Per l'em, è la dimensione del carattere dell'elemento dove il valore viene usato, oppure, per la proprietà font-size stessa, del genitore. Ecco perché l'em non ha una risposta unica: lo stesso valore in un foglio di stile significa dimensioni in pixel diverse in posti diversi. Se stai convertendo un padding per un pulsante il cui testo è 14 px, digita 14 come base. Se stai convertendo un margine per un titolo di 32 px, digita 32.
Il valore predefinito quando non lo sai
Se vuoi solo una cifra approssimativa, lascia la base a 16, la dimensione del testo ordinario in un browser che nessuno ha modificato. Il risultato è giusto per un blocco di normale testo del corpo, e ti dà un'idea della proporzione anche se l'elemento risulta avere una dimensione diversa.
Cosa mantiene la conversione e cosa non può
Mantiene la proporzione rispetto al testo
Il risultato è la proporzione rispetto alla dimensione del carattere in vigore dove il valore viene usato. Scritto in em, uno spazio cresce e si riduce con il testo accanto, ed è esattamente il modo in cui dovrebbe comportarsi la spaziatura intorno alle parole.
Non può darti un solo numero 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 non c'è una risposta unica per una pagina: lo stesso 1,5 em sono 24 px dentro un elemento da 16 px e 36 px dentro uno da 24 px, e l'em dentro l'em si moltiplica. La cifra sulla pagina è giusta per la base nel campo e per nient'altro. Se vuoi un numero unico che valga ovunque, è a questo che serve il rem. Per confrontare, converti px in rem e guarda come si comporta lo stesso valore in pixel.
Arrotondamento
La divisione per 16 dà valori puliti per molte dimensioni e decimali periodici per altre. Un valore come 0,8125 em va bene in un foglio di stile, ma potresti preferire arrotondare a 0,8 o 0,85 se la dimensione esatta non conta. Mantieni la cifra completa dove la precisione conta.
La trappola dell'annidamento
Come si compone l'em
Supponi che un elenco abbia font-size: 0.875em e che anche le sue voci abbiano font-size: 0.875em. L'elenco è l'87,5% del suo genitore. Ogni voce è l'87,5% dell'elenco, che è circa il 76,6% del genitore. Un elenco annidato dentro una voce si riduce di nuovo, a circa il 67%. Dopo tre livelli il testo è molto piccolo, e nessuno l'ha scritto di proposito. È questo che si intende dicendo che l'em si compone.
Perché conta quando converti px in em
Se converti un valore in pixel in em per font-size, la base che devi usare è la dimensione del carattere del genitore, non quella dell'elemento stesso. Molti errori vengono dall'usare quella sbagliata. Per altre proprietà, come padding e margin, la base è la dimensione del carattere dell'elemento stesso. La regola è facile da dire e facile da dimenticare: font-size guarda in alto, tutto il resto guarda sé stesso.
Come evitare sorprese
Usa l'em per la spaziatura che segue il testo, e il rem per le dimensioni dei caratteri. In questo modo le dimensioni dei caratteri non si compongono mai, perché si riferiscono alla radice, e la spaziatura segue comunque il proprio testo. È la combinazione su cui si stabiliscono la maggior parte dei fogli di stile moderni.
Dimensioni comuni
La tabella in fondo alla pagina
Sotto il convertitore c'è una tabella di dimensioni comuni alla base che imposti: 8 px sono 0,5 em, 10 px sono 0,625, 12 px sono 0,75, 14 px sono 0,875, 16 px sono 1, 18 px sono 1,125, 20 px sono 1,25, 24 px sono 1,5, 32 px sono 2, 48 px sono 3 e 64 px sono 4. A una base di 16, questi sono gli stessi numeri del rem, ed è per questo che le persone confondono i due. La differenza sta in ciò che il 16 rappresenta.
Cambiare la base per adattarla all'elemento
Se imposti la base a 14 per un piccolo pulsante, la tabella cambia: 14 px sono ora 1 em, 7 px sono 0,5 em e 21 px sono 1,5 em. Provalo, e vedrai come un padding di 1,5 em abbia una dimensione in pixel diversa in un pulsante da 14 px rispetto a uno da 18 px, e perché sia utile.
Come convertire px in em qui
Digita il valore in pixel
Inserisci la dimensione in pixel nel primo campo. I decimali sono accettati.
Imposta la dimensione del carattere a cui si riferisce l'em
Digita la dimensione del carattere dell'elemento, o del suo genitore se stai convertendo un font-size. Se non sei sicuro, lascia 16 e tratta il risultato come un'approssimazione.
Copia il valore in em
Usa la cifra nel tuo CSS con la sua unità, come in padding: 1.25em. Un numero senza unità non è valido per la maggior parte delle proprietà.
Da dove vengono queste unità
L'em nei caratteri di metallo
L'em è più antico del web. Nei caratteri di metallo era la larghezza di un blocco fuso, dal nome della lettera maiuscola M, ed era l'unità naturale dello spazio orizzontale sulla riga stampata. I tipografi parlano ancora di lineette em e di spazi em. Nel CSS l'idea sopravvive in una forma più libera: un em è la dimensione del carattere corrente.
Il pixel e il rem
Il pixel CSS è una lunghezza di riferimento di circa 1/96 di pollice visto a una comoda distanza di lettura, non un punto sul tuo schermo. Il rem è stato aggiunto per dare agli sviluppatori un'unità relativa ma che non si compone mai: è l'em dell'elemento radice. Tra loro, pixel, em e rem coprono i tre bisogni: dimensione fissa, dimensione relativa al testo e dimensione relativa alla pagina.
Dove l'em è la scelta giusta
Padding dentro pulsanti e campi di moduli
Un pulsante con padding: 0.5em 1em appare uguale in proporzione a qualsiasi dimensione del testo. Ingrandisci l'etichetta e l'intero pulsante cresce con essa, ed è ciò che vuoi da un componente che può essere usato in una barra degli strumenti e in un banner principale.
Spaziatura accanto alle icone
Un'icona seguita da una didascalia ha bisogno di uno spazio che si scali con la didascalia. Un margine di 0.4em lo fa; un margine di 6px no.
Margini intorno a titoli e paragrafi
Il ritmo verticale in un documento è più facile da mantenere quando la spaziatura dei paragrafi è in em, dato che segue la dimensione del paragrafo. Il margine di un titolo in em resta in proporzione quando il titolo cambia dimensione a diversi punti di interruzione.
Media query
I punti di interruzione scritti in em rispondono alla dimensione del testo del lettore, quindi l'impaginazione passa alla sua forma stretta prima per chi ha ingrandito il testo. Nelle media query, l'em si riferisce al valore predefinito del browser e non a un elemento, quindi non si compone.
Trappole quando converti px in em
Usare la base sbagliata
L'errore più comune. Per font-size, usa la dimensione del genitore; per tutto il resto, quella dell'elemento stesso. Controlla quale proprietà stai convertendo prima di digitare la base.
Dimenticare che anche il genitore può essere in em
Se la dimensione del carattere del genitore è a sua volta in em, devi seguire la catena verso l'alto per conoscere la dimensione vera. Quando un foglio di stile si complica, passa le dimensioni dei caratteri al rem e tieni l'em per la spaziatura.
Aspettarsi una sola cifra per un intero componente
Un componente che contiene testo di dimensioni diverse non ha un unico valore in em per le sue parti. Converti ogni parte rispetto alla propria base.
Mescolare em e rem per la stessa proprietà
Un padding di 1rem accanto a un margine di 1em è lecito e spesso confonde. Scegli una regola, come rem per le dimensioni dei caratteri ed em per la spaziatura, e rispettala.
Domande che si fanno prima di convertire
Quanti em sono 16 px?
Uno, se la dimensione del carattere in vigore è 16 px. Se la dimensione del carattere dell'elemento è 20 px, allora 16 px sono 0,8 em.
L'em è meglio del rem?
Nessuno dei due è meglio. Il rem è migliore per le dimensioni dei caratteri e l'impaginazione globale. L'em è migliore per la spaziatura che deve seguire il proprio testo.
Perché il mio padding è più grande del previsto?
Perché è relativo alla dimensione del carattere dell'elemento, che può essere più grande di quanto pensavi. Controlla la dimensione calcolata del carattere negli strumenti per sviluppatori del browser.
Posso usare i decimali?
Sì. Valori come 0.625em e 1.333em sono normali.
Il mio numero viene caricato?
No. L'aritmetica gira nel tuo browser e nulla viene inviato da nessuna parte.
Come torno indietro?
Con da em a px, che moltiplica invece di dividere.
Scegliere con giudizio quando converti px in em
Decidi a cosa appartiene il valore
Se appartiene al testo, l'em è giusto. Se appartiene alla pagina, come la larghezza di una colonna o lo spazio tra sezioni, il rem o un'unità del viewport è più adatto. Da px a vw esprime una dimensione come quota della larghezza dello schermo.
Scrivi l'intento in un commento
Una riga come padding: 0.75em 1.25em; /* 12px 20px a 16px */ rende visibile il ragionamento. Quando la dimensione del carattere cambierà in seguito, saprai cosa dovevano essere i numeri.
Tieni la dimensione del carattere del componente in un solo posto
Imposta la dimensione del carattere sull'elemento radice del componente e lascia che tutto ciò che sta dentro vi faccia riferimento. Allora i valori in em all'interno significano la stessa cosa ovunque nel componente, e puoi convertire px in em rispetto a una singola base.
Buone abitudini quando converti px in em
Converti px in em un componente alla volta
Non cercare di convertire px in em per un intero foglio di stile in un colpo solo. Prendi un singolo componente, come una scheda o un pulsante, decidi la sua dimensione del carattere e converti ciascuno dei suoi valori di spaziatura rispetto a quella dimensione. Quando il componente è finito, provalo a due o tre dimensioni del testo. Poi passa al successivo.
Usa un calcolatore per i valori dispari, non per quelli tondi
Valori come 8, 16 e 24 pixel si convertono in numeri em ordinati a una base di 16. Valori dispari come 22 o 13 danno lunghi decimali. Quando converti px in em per questi, decidi se il design ha davvero bisogno della cifra esatta o se il valore em tondo più vicino andrebbe altrettanto bene. I grafici sono spesso contenti di arrotondare, e un foglio di stile ordinato è più facile da mantenere.
Tieni traccia della base
Un breve commento accanto a ogni valore in em, che dice quale fosse la base, aiuta la persona successiva. Se qualcuno cambierà in seguito la dimensione del carattere del componente, saprà che la spaziatura la segue per progetto e non per caso. Scriverlo una volta vale il tempo che richiede.
Confronta con l'equivalente in rem
Se non sei sicuro se per un valore vada meglio l'em o il rem, converti px in em e in rem e chiediti cosa dovrebbe succedere quando cambia la dimensione del testo. Se il valore deve seguire il testo dell'elemento stesso, prendi l'em. Se deve seguire la pagina, prendi il rem.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare ai pixel, usa da em a px. Per le dimensioni relative alla radice, ci sono da px a rem e da rem a px, e per le dimensioni 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 HEX a HSL gestiscono le notazioni.
Un esempio svolto
Poniamo che l'etichetta di un pulsante sia 14 px e il design dia al pulsante 10 px di padding verticale e 20 px di padding orizzontale. Digiti 14 come base, 10 e leggi 0,714 em, digiti 20 e leggi 1,429 em. Nel foglio di stile scrivi padding: 0.714em 1.429em. Quando lo stesso pulsante viene usato in un banner principale con un'etichetta di 18 px, il padding diventa 12,9 px e 25,7 px, in proporzione. Se avessi scritto 10px e 20px, il pulsante sarebbe sembrato sottile intorno al testo più grande.
Una breve lista di controllo
Prima di convertire
Decidi a quale proprietà appartiene il valore, e trova la dimensione del carattere a cui deve essere relativo.
Durante la conversione
Digita il valore in pixel e la base giusta, e copia la cifra in em con la sua unità.
Dopo la conversione
Cambia la dimensione del carattere del componente nel browser e controlla che la spaziatura la segua. Cerca valori em annidati che si compongono.
Errori comuni
Usare la dimensione della radice come base per il padding
Quello è il compito del rem. L'em si riferisce alla dimensione del carattere dell'elemento stesso.
Usare l'em per ogni dimensione del carattere
Le dimensioni dei caratteri in em annidate si compongono e ti sorprendono. Usa il rem per le dimensioni dei caratteri.
Arrotondare a un numero visivamente ordinato ma sbagliato
1,43 non è lo stesso di 1,5 quando viene moltiplicato per un carattere grande. Mantieni abbastanza cifre.
I tuoi numeri restano sul tuo dispositivo
Il calcolo avviene in locale. I tuoi valori vengono usati dal tuo browser e nulla viene inviato da nessuna parte. Non c'è nulla da cancellare dopo e nessun account da creare. È il modo semplice di convertire px in em.
Riepilogo
Per convertire px in em qui, digita la dimensione in pixel e la dimensione del carattere a cui è relativa, e leggi subito il risultato, usando la formula em = px ÷ base. La conversione mantiene la proporzione rispetto alla dimensione del carattere in vigore dove il valore viene usato. Non può dare una risposta unica per una pagina: l'em è relativo alla dimensione del carattere dell'elemento stesso, o del genitore per font-size, quindi lo stesso 1,5 em sono 24 px dentro un elemento da 16 px e 36 px dentro uno da 24 px, e l'em dentro l'em si moltiplica. Per un numero unico che valga ovunque, usa il rem. Nulla viene caricato.