Convertire px in rem Pixels ↔ Root em Gratis Online Sicuro
Scriva un valore in px e lo legga subito in rem. 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 rem
| px | rem |
|---|---|
| 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é designer e sviluppatori convertono px in rem
Gli strumenti di design parlano in pixel. Un bozzetto dice che il titolo è 32 px, lo spazio tra le sezioni è 48 px, il pulsante ha 16 px di padding. I fogli di stile, scritti bene, parlano in rem. Il divario tra questi due linguaggi è dove sta questa pagina: digiti una dimensione in pixel e la leggi in rem, in modo che il numero che metti nel CSS significhi ciò che il designer intendeva. Convertire px in rem è un piccolo gesto, ma si fa centinaia di volte nella vita di un sito web, e una base sbagliata trasforma un'impaginazione curata in una leggermente sbagliata ovunque in una volta sola.
Il motivo per prendersi la briga del rem è l'accessibilità e la flessibilità. Un rem è un multiplo della dimensione del carattere radice, che un browser imposta a 16 px a meno che non gli si dica altrimenti, e che un lettore è libero di cambiare nelle sue impostazioni. Un'impaginazione scritta in rem mantiene quindi la sua forma quando qualcuno con la vista debole alza la dimensione predefinita del testo: caratteri, spaziatura e riquadri crescono insieme. Un'impaginazione scritta in pixel non segue, e il lettore che ha chiesto un testo più grande ottiene lettere più grandi in riquadri stretti, o niente affatto. Ecco perché quasi ogni guida di stile moderna dice la stessa cosa: usa il rem per caratteri e spaziatura.
Questa pagina fa l'aritmetica nel tuo browser. Nulla viene caricato, e ciò da cui dipende la conversione, la dimensione di base, è scritto qui sotto e sta in un campo che puoi cambiare, invece di essere presupposto alle tue spalle. Più sotto trovi la formula, la tabella delle dimensioni comuni, i motivi per cui la base conta, le trappole in cui cade chi converte px in rem di fretta e una breve guida all'uso del risultato nei fogli di stile reali.
La formula e la base
rem è uguale a px diviso la base
La formula è una divisione: rem = px ÷ base. Con la solita base di 16 px, una dimensione di 24 px diventa 1,5 rem, 32 px diventa 2 rem e 8 px diventa 0,5 rem. La pagina mostra il risultato mentre scrivi, e mostra la base che ha usato, quindi la riga 24 px = 1,5 rem (16 px) ti dice esattamente cosa è stato presupposto.
Da dove viene il 16
La base parte da 16 px perché è ciò che un browser usa quando nessuno dice altrimenti. Non è una legge del web; è il valore predefinito del valore predefinito, ed è stabile da decenni. Se il tuo CSS non tocca mai la dimensione del carattere radice, 1 rem sono 16 px per la maggior parte dei visitatori. Se la tocca, la base è quella che hai impostato.
Il trucco del 62,5% e perché lo si usa
Alcuni fogli di stile impostano la dimensione della radice al 62,5%, il che rende 1 rem uguale a 10 px su un browser predefinito, così 24 px sono semplicemente 2,4 rem e l'aritmetica è facile da fare a mente. Funziona, ma ha un costo: l'intera pagina ora dipende da quella percentuale, e qualsiasi componente che si aspetti 16 come base uscirà troppo piccolo. Se il tuo progetto fa così, digita 10 nel campo della base di questa pagina, e ogni cifra corrisponderà al tuo CSS.
Cosa mantiene la conversione e cosa non può
Mantiene la proporzione
Un rem è qualunque sia la dimensione del carattere radice, quindi un'impaginazione scritta in rem mantiene la sua forma quando quella dimensione cambia. È tutto il motivo per scriverla così. Quando converti px in rem, il numero che ottieni è la stessa proporzione che il valore in pixel aveva alla base che hai scelto, ora espressa in un modo che si scala.
Non può conoscere le impostazioni del tuo lettore
Il numero dipende interamente dalla base. Se il tuo CSS imposta una dimensione diversa sull'elemento radice, o il lettore ha cambiato la dimensione predefinita del testo nel suo browser, cosa che molte persone fanno e ne hanno diritto, allora 1 rem non sono 16 px per loro. La cifra sulla pagina è giusta solo per la base nel campo. Non è un difetto dello strumento ma la natura dell'unità: è relativa, e un'unità relativa non ha un valore fisso in cui convertire.
Arrotondamento
La divisione per 16 dà risultati puliti per molte dimensioni comuni (16, 24, 32, 48, 64) e decimali periodici per altre (10 px sono 0,625 rem; 13 px sono 0,8125). La pagina dà tutte le cifre di cui il numero ha bisogno, e decidi tu quante tenerne nel foglio di stile. I browser gestiscono lunghi decimali senza problemi, ma un valore arrotondato come 0.8125rem è più facile da leggere e mantenere di uno con dieci cifre.
Dimensioni comuni
La tabella in fondo alla pagina
Sotto il convertitore trovi una tabella di dimensioni comuni: 8 px sono 0,5 rem, 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. Sono le dimensioni che compaiono più spesso nelle scale tipografiche e nei sistemi di spaziatura, e averle davanti ti risparmia una conversione.
Una scala costruita sul rem
Un'abitudine utile è scegliere un piccolo insieme di valori in rem e riutilizzarli: 0,5, 1, 1,5, 2, 3 e 4 per la spaziatura, e 0,875, 1, 1,25, 1,5, 2 per i caratteri. I designer lo chiamano una scala, e mantiene coerente un sito dal punto di vista visivo. Quando un bozzetto ti dà un valore dispari come 22 px, usa il convertitore per vedere che sono 1,375 rem, e poi decidi se arrotondare al valore più vicino della tua scala.
Come convertire px in rem qui
Digita il valore in pixel
Inserisci la dimensione in pixel nel primo campo. I decimali sono accettati, quindi 13,5 px funziona come 14.
Controlla la base
Lasciala a 16 se il tuo CSS non cambia la dimensione della radice. Cambiala se lo fa. Il risultato si aggiorna mentre scrivi.
Copia il valore in rem
Leggi la cifra e usala nel tuo CSS, con l'unità scritta dopo: font-size: 1.5rem. Non dimenticare l'unità, dato che un numero nudo significa altro nella maggior parte delle proprietà.
Da dove vengono queste unità
Il pixel CSS non è il pixel del tuo schermo
Quando gli schermi smisero di avere una densità prevedibile, una pagina misurata in pixel reali divenne una pagina che si restringeva man mano che gli schermi diventavano più nitidi. Così il pixel CSS fu ridefinito come una lunghezza di riferimento: circa 1/96 di pollice visto a una comoda distanza di lettura. Tutto il resto in questa pagina si basa su questo. L'em è più antico del web: nei caratteri di metallo era la larghezza di un blocco fuso, dal nome della lettera maiuscola M, e nel CSS significa la dimensione del carattere in vigore, ed è per questo che cambia quando annidi gli elementi. Il rem è stato aggiunto per sfuggire proprio a questo: è l'em dell'elemento radice e non si compone mai.
Perché esiste il rem
Prima del rem, gli sviluppatori dimensionavano tutto in em o in percentuali, e gli elementi annidati si moltiplicavano a vicenda: un elenco dentro un elenco dentro un elenco si restringeva o si ingrandiva a ogni livello. Il rem ha dato loro un unico riferimento fisso, la radice, e ha eliminato la composizione. Se vuoi confrontare i due, converti px in em e guarda come lo stesso valore in pixel dipenda dall'elemento in cui sta.
Dove incontri il rem nella pratica
Caratteri
Il testo del corpo è comunemente 1 rem, i titoli da 1,25 a 3 rem, le note in piccolo da 0,75 a 0,875 rem. Scriverli in rem permette a un lettore di ingrandire l'intera pagina cambiando una sola impostazione del browser.
Spaziatura e impaginazione
Margini, padding e spazi in rem mantengono lo spazio bianco proporzionale ai caratteri. Quando il testo cresce, cresce anche lo spazio intorno, e l'impaginazione resta equilibrata invece di stipare lettere più grandi nei vecchi riquadri.
Media query
I punti di interruzione scritti in em o rem rispondono alla dimensione del testo del lettore, quindi un'impaginazione passa alla sua forma stretta prima per chi ha ingrandito il testo. È un affinamento che vale la pena conoscere, anche se i pixel restano comuni nei punti di interruzione.
Cosa lasciare in pixel
Bordi sottilissimi, ombre dei riquadri e icone sottili spesso appaiono meglio a dimensioni fisse in pixel, perché un bordo di 0.0625rem che cresce fino a 0.1rem con testo grande non aiuta nessuno. Usa il rem per ciò che deve scalarsi e i pixel per ciò che no.
Trappole quando converti px in rem
Dimenticare che la base non è sempre 16
Se un progetto imposta html { font-size: 62.5% }, o usa una dimensione fluida della radice, il fattore è diverso. Controlla il foglio di stile prima di fidarti di un numero di qualsiasi convertitore, compreso questo.
Convertire la dimensione della radice stessa
Se imposti la dimensione della radice in pixel, l'impostazione del browser del lettore viene scavalcata e il vantaggio del rem si perde. Imposta la radice come percentuale, o lasciala stare, in modo che la preferenza dell'utente sia rispettata.
Usare il rem dentro un componente che imposta la propria dimensione del carattere
Il rem si riferisce sempre alla radice, non al componente. Un pulsante con una dimensione del carattere di 14 px e un padding di 1rem ha un padding che non segue il testo del pulsante stesso. Se vuoi una spaziatura che segua il testo dell'elemento, quello è compito dell'em.
Mescolare unità senza un piano
Un foglio di stile che usa px per un margine, rem per il successivo ed em per un terzo è difficile da ragionare. Scegli una regola: rem per caratteri e spaziatura, pixel per bordi e ombre, e mantienila.
Domande che si fanno prima di convertire
Quanti rem sono 16 px?
Uno, su un browser predefinito. Sedici diviso la base di sedici.
Il rem è meglio dei px?
Per caratteri e spaziatura, è la scelta migliore nella maggior parte dei progetti, perché rispetta le impostazioni del lettore. I pixel restano giusti per le cose che non devono scalarsi.
Perché il mio risultato differisce da quello di un altro sito?
Probabilmente una base diversa. Controlla il campo: alcuni strumenti presumono 10, altri 16, altri 14. Questa pagina mostra la base accanto al risultato.
Devo arrotondare?
No. I browser accettano lunghi decimali. Arrotonda solo per leggibilità.
Il mio numero viene caricato?
No. L'aritmetica gira nel tuo browser e nulla viene inviato da nessuna parte.
Come torno indietro?
Con da rem a px, che moltiplica invece di dividere.
Scegliere con giudizio quando converti px in rem
Decidi una base per il progetto e mantienila
Qualunque cosa scegli, fanne una decisione e scrivila nella documentazione del progetto. Un team in disaccordo sulla base produce componenti che non combaciano.
Converti in fase di design, non all'ultimo momento
Se converti px in rem mentre leggi il bozzetto, costruisci la scala nel design e noti presto i valori dispari. Se lo fai alla fine, li scopri come un mucchio di numeri incoerenti.
Considera anche le unità del viewport
Per i titoli che devono riempire lo schermo, da px a vw esprime una dimensione come quota del viewport. Si scala in modo diverso dal rem, e i due si combinano spesso.
Abitudini che rendono più facile convertire px in rem
Tieni una tabella di conversione in testa
Con una base di 16, qualche punto di riferimento copre la maggior parte del lavoro: 4 px sono 0,25 rem, 8 px sono 0,5, 12 px sono 0,75, 16 px sono 1, 24 px sono 1,5 e 32 px sono 2. Quando un bozzetto ti dà un valore tra di essi, puoi stimare prima di convertire px in rem sulla pagina, e usare il convertitore solo per confermare. Dopo qualche settimana conoscerai la tabella senza guardare.
Lascia che sia il sistema di design a lavorare
Se il tuo team tiene dei design token, come spacing-2 o font-lg, memorizzali in rem una volta sola, e lascia che tutti si riferiscano ai nomi. Allora nessuno ha bisogno di convertire di nuovo px in rem, e una modifica alla scala si fa in un solo posto. Il convertitore è lo strumento che usi quando scrivi i token, non quando li usi.
Scrivi il valore in pixel in un commento
Una riga come padding: 1.25rem; /* 20px */ costa pochi caratteri e risparmia al prossimo sviluppatore di cercare una calcolatrice. Registra anche quale base hai presupposto, il che aiuta se la dimensione della radice verrà cambiata in seguito.
Prova con un'impostazione del browser modificata
La prova che una pagina è costruita in rem è che sopravvive a una dimensione predefinita del testo più grande. Cambia l'impostazione nel tuo browser, ricarica e guarda. I componenti che si rompono sono quelli in cui qualcosa è stato lasciato in pixel o dove un'altezza fissa ha tagliato il testo.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare ai pixel, usa da rem a px. Per le dimensioni relative all'elemento, ci sono da px a em e da em a px, e per le dimensioni relative allo schermo, da px a vw e da vw a px. Se il tuo lavoro include colori oltre alle dimensioni, da HEX a RGB, da RGB a HEX e da HEX a HSL gestiscono le notazioni del foglio di stile.
Un esempio svolto
Poniamo che un bozzetto dia il titolo di una scheda a 28 px, un padding della scheda di 20 px e uno spazio di 12 px tra le schede, e il tuo progetto usi la base predefinita di 16 px. Digiti 28 e leggi 1,75 rem, digiti 20 e leggi 1,25 rem, digiti 12 e leggi 0,75 rem. Nel foglio di stile scrivi font-size: 1.75rem, padding: 1.25rem e gap: 0.75rem. Un visitatore che alza la dimensione del testo del browser a 20 px vede la stessa scheda, scalata di un quarto: il titolo è 35 px, il padding 25 px e lo spazio 15 px, tutto in proporzione. Se avessi scritto in pixel, il titolo sarebbe rimasto a 28 e la scheda sarebbe sembrata sbagliata.
Una breve lista di controllo
Prima di convertire
Scopri la base che usa il tuo CSS. Decidi quali dimensioni devono scalarsi e quali no.
Durante la conversione
Digita il valore in pixel, controlla la base mostrata accanto al risultato e copia la cifra in rem con la sua unità.
Dopo la conversione
Prova la pagina con una dimensione predefinita del testo più grande nel browser, e cerca i riquadri che non contengono più il loro testo.
Errori comuni
Dare per scontato che 1 rem siano sempre 16 px
Lo sono solo quando nessuno ha cambiato la dimensione della radice, e alcuni lettori l'hanno fatto. Scrivi l'impaginazione in modo che funzioni anche ad altre dimensioni.
Impostare la dimensione della radice in pixel
Scavalca la scelta del lettore. Usa una percentuale, oppure non impostarla.
Convertire tutto
Non ogni dimensione deve scalarsi. Lascia bordi e ombre in pixel.
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 rem.
Riepilogo
Per convertire px in rem qui, digita la dimensione in pixel e leggila subito in rem, usando la formula rem = px ÷ base. La base parte da 16 px, il valore predefinito di un browser, e puoi cambiarla per adattarla al tuo CSS. La conversione mantiene la proporzione: un'impaginazione scritta in rem mantiene la sua forma quando cambia la dimensione del carattere radice. Non può conoscere le impostazioni del tuo lettore, quindi la cifra è giusta solo per la base nel campo. Le dimensioni comuni nella tabella sotto il convertitore, da 8 px a 0,5 rem fino a 64 px a 4 rem, ti risparmiano di ripetere l'aritmetica. Nulla viene caricato.