Portare il mockup nel codice
Il progetto dà 24 px di spaziatura e il foglio di stile deve ricevere 1,5rem. È il tragitto più frequente nel lavoro quotidiano sull’interfaccia.
Converti i pixel in rem con qualsiasi base
Con l’impostazione predefinita del browser 24 pixel valgono 1,5rem e 14 pixel valgono 0,875rem. Scrivi la misura del mockup, imposta la dimensione del carattere base e porta il risultato direttamente nel foglio di stile.
Loading tool editor...
PUBBLICITÀ
A cosa serve convertire i pixel in rem?
Il pixel diventa rem con una sola divisione: il numero di pixel diviso per la dimensione del carattere base. Con l’impostazione predefinita del browser quella base vale 16 px, quindi 24 pixel danno 1,5rem e 14 pixel danno 0,875rem. L’unità rem si riferisce alla dimensione del testo dell’elemento html, la radice del documento [1].
È il verso più frequente nel lavoro quotidiano. Il mockup arriva con misure in pixel, perché così contano i programmi di grafica, e il foglio di stile si scrive in rem perché l’impianto risponda alle impostazioni di chi legge.
Il risultato porta quattro decimali, perché con base 16 px un singolo pixel vale esattamente 0,0625rem e le dimensioni del testo producono cifre come 0,875 o 1,125.
Più sotto trovi una tabella con 30 valori su tre basi, come automatizzare la conversione dentro il progetto e una rassegna di proprietà CSS con la risposta su quali passare in rem. Il percorso inverso lo copre il convertitore da rem a pixel.
Come calcolare i pixel in rem a mano? Formula ed esempio
La formula contiene una sola operazione: rem = pixel ÷ dimensione carattere base. È l’inversa della moltiplicazione che trasforma i rem in pixel.
Esempio con una spaziatura da 20 px: con base 16 viene 20 ÷ 16 = 1,25rem. Lo stesso valore con la base da 10 px della tecnica del 62,5% dà 2rem, perché dividere per dieci si fa a mente.
Le misure di un mockup danno spesso frazioni: 18 pixel sono 1,125rem, 30 pixel sono 1,875rem e 22 pixel sono 1,375rem. Tutte e tre sono esatte e la maggior parte dei design system le conserva così, quindi le scrivi tali e quali nel foglio di stile.
L’unità em si calcola allo stesso modo, dividendo per la dimensione del carattere dell’elemento genitore invece che per quella della radice: quel calcolo lo fa il convertitore da pixel a em. Se la misura finisce sulla carta, lo stesso file lo risolve il convertitore da pixel a pollici.
PUBBLICITÀ
Quanti rem valgono i valori più comuni in pixel?
| Valore in pixel | Base 16 px (predefinita) | Base 10 px (62,5%) | Base 20 px (testo ingrandito) |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
Le tre basi coprono tre situazioni: 16 px è l’impostazione predefinita del browser, 10 px viene dalla tecnica del 62,5% e 20 px è una cifra tipica di chi ha ingrandito il testo nelle proprie impostazioni.
Come convertire i pixel in rem automaticamente in un progetto?
Per un valore singolo basta il convertitore qui sopra. Per un foglio di stile intero il calcolo passa a uno strumento che lo esegue a ogni build del progetto.
Nel preprocessore scrivi una funzione che divide la cifra per la base. In Sass viene così: @function rem($px) { @return math.div($px, 16) * 1rem; }, e poi nella regola metti padding: rem(24) e ottieni 1.5rem. La base vive allora in un solo posto e si cambia una volta sola.
La seconda via lavora sul foglio già finito e lascia intatto il tuo modo di scrivere. Il plugin postcss-pxtorem, agganciato alla fase di build, percorre il file di uscita e sostituisce i pixel con i rem secondo la base configurata. Negli ultimi 30 giorni il registro npm ne ha contato più di 870.000 download [2].
La terza via sono le variabili CSS. Scrivi --space-6: 1.5rem una volta nel foglio e poi richiami il nome invece della cifra. La conversione avviene allora una sola volta, quando definisci la scala, e non in ogni regola.
PUBBLICITÀ
Quali proprietà passare in rem e quali lasciare in pixel?
| Proprietà CSS | Passare in rem? | Perché |
|---|---|---|
| font-size | Sì | Il cuore della questione: la dimensione del testo deve rispondere all’impostazione del browser |
| padding e margin | Sì | Lo spazio attorno al testo deve crescere con lui, altrimenti con un corpo maggiore resta stretto |
| larghezza di una colonna di testo | Sì | La lunghezza di riga si misura in caratteri, quindi la larghezza segue la dimensione del testo |
| line-height | No, senza unità | Un moltiplicatore nudo come 1.5 si eredita bene a ogni profondità |
| border-width | No | Un filetto deve restare un filetto, qualunque sia la dimensione del testo |
| box-shadow | No | L’ombra è un effetto grafico slegato dalla dimensione del testo |
| border-radius | Di solito no | Il raggio descrive la forma dell’elemento, non il suo contenuto |
| punti di rottura delle media query | Sì, ma in em | Dentro una media query il browser conta dalla dimensione del testo predefinita e non dall’elemento html, quindi l’em si comporta in modo prevedibile <a class="source-ref" href="#zrodlo-3">[3]</a> |
Riscrivere un foglio di stile esistente non obbliga a convertire tutto. Il passaggio ai rem rende dove una misura deve crescere insieme al testo di chi legge.
Pixel e rem a confronto
| Caratteristica | px | rem |
|---|---|---|
| Punto di riferimento | Nessuno, è un valore assoluto | Dimensione del carattere dell’elemento html |
| Valore predefinito | 1 px = 1/96 di pollice | 1rem = 16 px |
| Reazione alle impostazioni di chi legge | Resta invariato | Scala insieme a loro |
| Dove viene indicato | Mockup, programmi di grafica, file immagine | Fogli di stile, design system |
| Uso abituale | Bordi, ombre, filetti | Dimensioni del testo, spaziature, larghezze |
| Automazione | Valore scritto direttamente | Funzione nel preprocessore o plugin nella build |
PUBBLICITÀ
Quando ti servirà questa conversione?
Fissare la scala del progetto
Invece di convertire in ogni regola, definisci una volta le variabili CSS o una funzione nel preprocessore e richiami i nomi.Riscrivere un foglio vecchio
Nella migrazione dai pixel ai rem converti dimensioni del testo e spaziature, mentre bordi e ombre restano come sono.Controllo di accessibilità
I valori scritti in rem crescono con l’impostazione di chi legge, che è quanto chiede il criterio WCAG 1.4.4 sull’ingrandimento del testo al 200% [4].
Converti Pixel in altre unità
Esplora altri convertitori di unità
pt in pxrem in pxem in pxcm in pxmm in pxcm in pollicipollici in cmmm in pollicipollici in mmmiglia in kmkm in migliametri in piedipiedi in metripollici in piedipiedi in pollicilibbre in onceonce in libbreml in onceonce in mllitri in gallonigalloni in litrikg in libbrelibbre in kgkg in grammigrammi in kgkg in stonestone in kgpollici in pxpiedi in pxpica in pxmetri in pxHEX in RGBRGB in CMYKbyte in KBKB in byteKB in MBMB in KBMB in GBGB in MBKB in GBGB in KBGB in TBTB in GBKB in TBTB in KBUnix in dataDEC in BINDEC in HEXMbps in MB/s
Fonti
- CSS Values and Units Module Level 4 — W3C
- postcss-pxtorem — npm
- CSS values and units – length — MDN Web Docs
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
Tutti i valori delle tabelle sono stati calcolati dalle definizioni delle unità e verificati con il calcolo prima della pubblicazione. I dati storici e i nomi delle unità locali si basano sulle fonti elencate sopra.
Ultima revisione dei contenuti: · scritto e verificato dal team Arteon
Domande frequenti
Quanti rem è 1 pixel?
Con la base predefinita da 16 px un pixel è 0,0625rem. Con la base da 10 px della tecnica del 62,5% quello stesso pixel dà 0,1rem, e con il testo ingrandito a 20 px dà 0,05rem.
Come si convertono i px in rem?
Dividi il numero di pixel per la dimensione del carattere base. Con i 16 px predefiniti viene 24 ÷ 16 = 1,5rem. Il convertitore qui sopra esegue quella divisione per qualsiasi base da 1 a 100 px.
Quanti rem sono 24 px?
1,5rem con base 16 px, 2,4rem con base 10 px e 1,2rem con base 20 px. Il valore 1,5rem è una dimensione tipica per un titolo di sezione.
Quanti rem sono 14 px?
0,875rem con la base predefinita da 16 px. Questo valore torna nelle etichette dei campi e nel testo di aiuto che sta sotto.
Quanti rem sono 20 px?
1,25rem con base 16 px. Con base 10 px il valore cade su 2rem tondi, il che è un argomento a favore della tecnica del 62,5% nei progetti con una scala di spaziatura ampia.
Quanti rem sono 12 px?
0,75rem con base 16 px. È la dimensione del testo più piccola in uso corrente nelle interfacce: sotto quella soglia la lettura diventa faticosa.
Quanti rem sono 40 px?
2,5rem con base 16 px, 4rem con base 10 px e 2rem con base 20 px. Valori di quest’ordine descrivono spaziature fra sezioni invece di dimensioni del testo.
Quanti rem sono 80 px?
5rem con la base predefinita da 16 px. Con base 10 px vengono 8rem e con 20 px vengono 4rem.
Bisogna arrotondare il risultato in rem?
Valori come 0,875 o 1,875rem si scrivono tali e quali, e così li conserva la maggior parte dei design system. Il browser li calcola con esattezza, mentre arrotondare a 0,88rem sposterebbe la dimensione del testo di una frazione di pixel.
Come convertire i pixel in rem automaticamente?
Nel preprocessore scrivi una funzione che divide per la base e poi metti rem(24) al posto di una cifra. Su un foglio già finito ci pensa il plugin postcss-pxtorem nella fase di build. La terza via sono le variabili CSS con la scala definita una volta sola.
Bisogna passare tutto il foglio di stile in rem?
Dimensioni del testo, spaziature e larghezze di colonna sì, perché devono crescere con l’impostazione di chi legge. Bordi, ombre e filetti restano in pixel, e l’altezza di riga si scrive senza unità, come semplice moltiplicatore.
Quale unità conviene nelle media query?
L’em. Dentro una media query il browser risolve le unità relative rispetto alla dimensione del testo predefinita e non rispetto al valore messo sull’elemento html, quindi un punto di rottura scritto in em si comporta in modo prevedibile anche se il progetto usa la tecnica del 62,5%.
Aiutaci a migliorare i nostri strumenti
Hai un’idea per una funzione, hai trovato un errore o vuoi proporre un altro strumento? Scrivici, rispondiamo entro 24 ore.