Convertire rem in px Root em ↔ Pixels Gratis Online Sicuro
Scriva un valore in rem 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 rem in px
| rem | 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 rem in px
Apri un foglio di stile e vedi padding: 2.25rem su una scheda e font-size: 0.8125rem su una didascalia. Sono buoni valori, scritti come dovrebbe essere scritto il CSS moderno, e a colpo d'occhio non dicono nulla. Quanto è grande quel padding della scheda sullo schermo? La didascalia sarà leggibile? Corrisponde ai 36 px e ai 13 px del file di design che ti hanno consegnato? Per rispondere converti rem in px: moltiplichi per la dimensione del carattere radice e leggi la risposta nell'unità usata dagli strumenti di design. È la direzione inversa rispetto a quella consueta, ed è ciò che fai quando leggi codice, controlli un bozzetto rispetto a una build o spieghi un'impaginazione a qualcuno che pensa in pixel.
La conversione è facile; ciò che le fa meritare una pagina è la base. Un rem non è una dimensione, è un multiplo di una dimensione, la dimensione del carattere dell'elemento radice. In un browser a cui nessuno ha detto altrimenti quella dimensione è 16 px, quindi 1 rem è 16 px, 2,25 rem sono 36 px e 0,8125 rem sono 13 px. Ma la radice può essere cambiata dal foglio di stile, e il lettore può cambiarla nel browser, e allora ogni valore in rem della pagina si sposta con essa. La pagina quindi chiede la base e la usa, invece di nasconderla.
Il calcolo avviene nel tuo browser, e nulla viene caricato. Più sotto trovi la formula, una tabella dei valori comuni, cosa mantiene e cosa non può mantenere la conversione, le situazioni in cui gli sviluppatori hanno bisogno di convertire rem in px e alcune abitudini che mantengono leggibile un foglio di stile basato sui rem.
La formula e la base
px è uguale a rem moltiplicato per la base
La formula è una sola moltiplicazione: px = rem × base. Con la solita base di 16 px, 1,5 rem diventano 24 px, 0,75 rem diventano 12 px e 4 rem diventano 64 px. La pagina stampa la base accanto al risultato, quindi una riga come 1.5 rem = 24 px (16 px) dichiara cosa ha presupposto e puoi vedere subito se corrisponde al tuo progetto.
Scoprire la tua base
Cerca nel foglio di stile una regola su html o :root che imposti font-size. Se non c'è, la base è il valore predefinito del browser di 16 px. Se c'è, come 62.5%, prendi quella percentuale di 16: 62.5% dà 10 px. Negli strumenti per sviluppatori del browser puoi anche selezionare l'elemento radice e leggere la sua dimensione del carattere calcolata, che è il numero da digitare nel campo della base.
Quando la dimensione della radice è fluida
Alcuni siti fanno crescere la dimensione della radice con la finestra, usando un'espressione clamp. Allora 1 rem non ha affatto un unico valore in pixel: è 15 px su un telefono e 18 px su un monitor largo. In quel caso qualsiasi conversione è un'istantanea. Digita la base che vedi alla larghezza che ti interessa, e tieni presente che la risposta vale solo a quella larghezza.
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. Quando converti rem in px, il valore in pixel è quella stessa proporzione resa concreta per una base particolare. Il rapporto fra due dimensioni, per esempio un titolo di 2 rem su un testo del corpo di 1 rem, non cambia comunque tu lo converta, ed è quel rapporto da cui dipende una buona impaginazione.
Non può conoscere le impostazioni del tuo lettore
Il numero dipende interamente dalla base. Se il lettore ha aumentato la dimensione predefinita del testo del suo browser, cosa che molte persone fanno e ne hanno diritto, allora 1 rem non è 16 px per lui, e la cifra che vedi è giusta solo per la base nel campo. Considera il valore in pixel un modo per capire il design, non una promessa di ciò che vedrà ogni visitatore.
Arrotondamento
Poiché la base è di solito un numero intero, il risultato della moltiplicazione è di solito esatto. 0,8125 rem sono esattamente 13 px a una base di 16; 0,6875 rem sono esattamente 11 px. Se ottieni un lungo decimale, è segno che il valore in rem è stato calcolato da una base diversa da quella che hai digitato.
Valori comuni
La tabella a piè di pagina
La pagina include una tabella dei valori in pixel a cui corrispondono le cifre comuni in rem alla base che hai impostato: 0,5 rem 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. Sono i valori che compaiono più spesso nelle scale di spaziatura e tipografiche, e conoscerli a memoria rende un foglio di stile leggibile a colpo d'occhio.
Leggere un foglio di stile in pixel
Un esercizio utile è prendere un foglio di stile che non hai scritto e tradurre una volta i suoi valori principali in pixel, scrivendo i risultati in una nota. Una dimensione del corpo di 1 rem, titoli di 1,5 e 2,25 rem, uno spazio del contenitore di 2 rem: in pixel, 16, 24, 36 e 32. Visto così, la logica del design appare, e puoi confrontarla con il file di design senza calcolatrice.
Come convertire rem in px qui
Digita il valore in rem
Inserisci la dimensione in rem nel primo campo. I decimali sono accettati, quindi 0.8125 funziona come 1.
Imposta 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.
Leggi il valore in pixel
La risposta compare subito, con la base mostrata accanto, così puoi capire cosa è stato presupposto. Copiala nei tuoi appunti o confrontala con il file di design.
Da dove vengono queste unità
Il pixel CSS
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. Un pixel in un foglio di stile non è quindi un punto sul tuo schermo ma un'unità di lunghezza che il browser fa corrispondere a tanti punti quanti ne servono allo schermo.
Il rem
L'em è più antico del web: nei caratteri di metallo era la larghezza di un blocco fuso, dal nome della M maiuscola, e in CSS significa la dimensione del carattere in vigore, per cui cambia quando annidi gli elementi. Il rem è stato aggiunto proprio per sfuggire a questo: è l'em dell'elemento radice e non si compone mai. Per vedere la differenza in numeri, converti px in em e confrontalo con ciò che ottieni quando converti rem in px.
Quando gli sviluppatori convertono rem in px
Controllare una build rispetto a un file di design
Un designer consegna un file in pixel; lo sviluppatore ha scritto il codice in rem. Per controllare che la pagina corrisponda, converte rem in px e confronta i numeri. Una discrepanza salta fuori subito: 1,375 rem sono 22 px, e se il design dice 24, uno dei due è sbagliato.
Leggere codice sconosciuto
Quando erediti un foglio di stile, i valori in rem nascondono le dimensioni reali. Convertirne una manciata dei principali ti dà una mappa del design: quanto è grande il testo, quanto sono larghi gli spazi, dove cadono i punti di interruzione.
Scrivere segnalazioni di bug e documentazione
Chi prova una pagina descrive ciò che vede in pixel. Uno sviluppatore che dice che il padding è 2,5 rem significa poco per un tester; 40 px significa qualcosa. Convertire fa capire i due lati l'uno all'altro.
Impostare valori che devono essere esatti in pixel
Alcune cose devono essere un numero esatto di pixel del dispositivo o appaiono sfocate: un bordo di un pixel, un'icona disegnata su una griglia di 24 px. Se una dimensione deve cadere sulla griglia dei pixel, convertire rem in px ti dice se lo fa alla tua base.
Trappole quando converti rem in px
Dimenticare una dimensione della radice cambiata
Se la radice è impostata al 62.5% o a un'espressione clamp, il fattore standard di 16 non vale. Il risultato è sbagliato del rapporto fra le due basi. Controlla sempre prima la base.
Confondere rem con em
L'em è relativo alla dimensione del carattere dell'elemento stesso, non alla radice. Un valore di 1.5em dentro un titolo di 24 px è 36 px, ma dentro un paragrafo di 16 px è 24 px. Questa pagina converte rem, che non ha una simile ambiguità. Per l'em, vedi da em a px.
Presumere 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, che è ciò che usano sia gli strumenti di design sia il foglio di stile.
Arrotondare troppo presto
Se arrotondi 13.333 px a 13 e poi riconverti, ottieni 0,8125 rem, non lo 0,8333 da cui eri partito. Conserva il valore originale in rem quando conta.
Domande che si fanno prima di convertire
Quanti pixel è 1 rem?
Sedici, in un browser il cui valore predefinito non è stato cambiato.
Quanti pixel sono 2 rem?
Trentadue alla base predefinita. A una base di 10 sarebbero 20.
Perché il mio browser mostra qualcosa di diverso?
L'impostazione del lettore o una regola nel foglio di stile ha cambiato la dimensione della radice. Guarda la dimensione del carattere calcolata dell'elemento radice negli strumenti per sviluppatori.
Il rem è uguale all'em?
No. Il rem si riferisce all'elemento radice e l'em si riferisce all'elemento stesso.
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 rem, che divide invece di moltiplicare.
Abitudini che rendono leggibile un foglio di stile in rem
Scrivi il valore in pixel in un commento
Una riga come gap: 1.5rem; /* 24px */ costa pochi caratteri e risparmia al lettore successivo una conversione. Registra anche la base che hai presupposto.
Usa una scala piccola
Un progetto che usa solo una manciata di valori in rem, come 0,5, 1, 1,5, 2 e 3, è facile da imparare: dopo un giorno li conosci in pixel senza pensarci. Quando converti rem in px per un foglio di stile del genere stai solo confermando ciò che ricordi.
Dai un nome ai tuoi valori
Con le proprietà personalizzate, come --space-md: 1.5rem, il foglio di stile descrive l'intento invece dei numeri. Il nome porta il significato, e il numero sta in un solo posto.
Prova con una dimensione predefinita diversa
Aumenta la dimensione predefinita del testo nel tuo browser e guarda la pagina. Se regge, l'impaginazione è davvero costruita in rem. Se si rompe, qualcosa è rimasto in pixel.
Usare bene il valore in pixel dopo aver convertito rem in px
Confronta i rapporti, non solo i numeri
Quando converti rem in px per un intero foglio di stile, guarda i rapporti fra le dimensioni oltre alle dimensioni stesse. Una scala tipografica in cui ogni gradino è circa 1,25 volte il precedente dà 16, 20, 25, 31 e 39 pixel; una scala di 1,5 dà 16, 24, 36 e 54. Individuare il rapporto ti dice cosa intendeva il designer, e ti permette di estendere la scala in modo coerente quando ti serve una nuova dimensione.
Traduci per chi pensa in pixel
Non tutti in un team leggono i rem. Project manager, copywriter e clienti lavorano spesso da schermate e chiedono che un titolo sia un po' più grande. Se puoi dire che il titolo ora è 36 px e sarebbe 40 px a 2,5 rem, la conversazione è breve. La pagina è utile come rapido ponte fra i due vocabolari.
Controlla le aree di tocco e le dimensioni minime
Le linee guida per gli schermi touch chiedono aree di almeno circa 44 px, e quelle per il testo chiedono un testo del corpo di circa 16 px o più. Entrambe sono espresse in pixel. Per verificare un foglio di stile scritto in rem rispetto ad esse, converti rem in px e vedi se pulsanti e testo superano la soglia.
Pensa al caso ingrandito
Il valore che ottieni è per la base che hai digitato. Se i tuoi lettori possono ingrandire il testo, prova di nuovo la conversione con una base di 20 o 24 e vedi cosa l'impaginazione chiede allo schermo. Una scheda comoda a 16 può traboccare a 24, e il momento migliore per scoprirlo è prima che la pagina sia pubblicata.
Convertitori correlati
La stessa famiglia di strumenti copre le conversioni vicine. Per tornare ai rem, usa da px a rem. 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. Per i colori dello stesso foglio di stile, da HEX a RGB e da HSL a HEX sono a portata di mano, e per i nomi delle classi, da testo a kebab-case trasforma una frase in un nome che il CSS accetta.
Un esempio svolto
Poniamo che tu stia rivedendo una pull request e il foglio di stile abbia una sezione hero con padding: 5rem 1.5rem, un titolo di 3.5rem e un paragrafo introduttivo di 1.25rem. Il file di design dice 80 px e 24 px di padding, un titolo di 56 px e un'introduzione di 20 px. Digiti 5 e leggi 80 px, digiti 1,5 e leggi 24, digiti 3,5 e leggi 56, digiti 1,25 e leggi 20. Tutti e quattro corrispondono, quindi la build è fedele. Se il titolo fosse stato 3,25 rem, avresti letto 52 e notato la differenza prima che arrivasse al designer.
Una breve lista di controllo
Prima di convertire
Trova la base: la regola della radice nel foglio di stile, o la dimensione calcolata negli strumenti per sviluppatori.
Durante la conversione
Digita il valore in rem, controlla la base mostrata accanto al risultato e annota la cifra in pixel.
Dopo la conversione
Confronta con il file di design. Se i numeri differiscono, controlla la base prima di sospettare del codice.
Errori comuni
Usare 16 senza controllare
È il valore predefinito, non una regola. Controlla la radice.
Trattare i pixel come definitivi
La risposta vale per una base. Un lettore con un valore predefinito maggiore vede pixel più grandi.
Confondere rem ed em
Si somigliano e si comportano in modo diverso. Usa la pagina giusta per ciascuno.
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 rem in px.
Riepilogo
Per convertire rem in px qui, digita la dimensione in rem e leggila subito in pixel, usando la formula px = rem × 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, dato che un rem è qualunque sia la dimensione del carattere radice, e non può conoscere le impostazioni del tuo lettore, quindi la cifra è giusta solo per la base nel campo. La tabella dei valori comuni, da 0,5 rem a 8 px fino a 4 rem a 64 px, ti aiuta a leggere un foglio di stile a colpo d'occhio. Nulla viene caricato.