Convertitore da PX a REM + tabella completa da 1 a 128px | We.Inc
Converti px in rem e rem in px con qualsiasi dimensione del font radice. Tabella completa da 1 a 128px con classi Tailwind, un convertitore di blocchi CSS e un helper per clamp() fluidi.
Convertitore da PX a REM
Per trasformare i pixel in rem, dividi il valore in pixel per la dimensione del font radice. Con il valore predefinito del browser di 16px, 24px corrispondono a 1.5rem e 12px a 0.75rem. Scrivi un valore in una delle due caselle per convertire in entrambe le direzioni, cambia la dimensione radice se il tuo sito usa una base diversa, oppure incolla intere regole CSS.
Dimensioni comuni con la radice predefinita di 16px
Pixel
Uso tipico
Didascalie, etichette piccole
Testo secondario, pulsanti
Testo del corpo
Testo del corpo grande, titoli piccoli
Titoli di sezione, padding delle card
Titoli di pagina, spazi tra sezioni
Titoli hero
Un convertitore bidirezionale con dimensione radice personalizzabile, una tabella completa da 1 a 128 pixel con la classe Tailwind corrispondente, un convertitore per interi blocchi CSS e un helper che scrive dimensioni fluide con clamp().
Imposta la dimensione del font radice. Lasciala a 16 a meno che il tuo foglio di stile non imposti una dimensione diversa sull'elemento html.
Scrivi nella casella dei pixel per ottenere i rem, o nella casella dei rem per ottenere i pixel. Entrambe si aggiornano mentre scrivi.
Scorri la tabella per trovare qualsiasi dimensione da 1 a 128 pixel. Clicca su una riga per copiarne il valore in rem.
Incolla del CSS nel convertitore di blocchi per trasformare in rem tutti i valori in px in un colpo solo. Zero diventa 0 e i bordi da 1px restano in pixel, a meno che tu non deselezioni quell'opzione.
Usa l'helper clamp() per ottenere una dimensione del font che cresce in modo fluido tra la larghezza di un telefono e quella di un desktop.
Lascia la dimensione del font di html al 100% (il valore predefinito del browser) invece di impostarla al 62.5%. Il trucco del 62.5% fa valere 1rem 10px, ma rimpicciolisce ogni componente di terze parti che presuppone 16px.
Usa rem per le dimensioni dei font e per la maggior parte delle spaziature, così l'intero layout si adatta quando qualcuno aumenta la dimensione del testo predefinita del browser.
Lascia in px i bordi sottilissimi e gli offset di box-shadow. Un bordo da 1px che diventa 0.0625rem può apparire sfocato o sparire a certi livelli di zoom.
Anche le media query in em o rem seguono l'impostazione del font dell'utente. La maggior parte dei browser considera 1em in una media query come la dimensione predefinita del browser, non quella della tua regola html.
Domande frequenti
Quanti pixel vale 1rem?
1rem è uguale alla dimensione del font dell'elemento radice html. I browser la impostano di default a 16px, quindi 1rem vale 16px a meno che il sito o il visitatore non la cambino. Se un visitatore imposta la dimensione del testo predefinita a 20px, 1rem diventa 20px su qualsiasi sito che non abbia fissato la dimensione radice in pixel.
Qual è la differenza tra rem ed em?
rem è sempre relativo alla dimensione del font radice di html. em è relativo alla dimensione del font dell'elemento stesso (o del suo genitore, quando è usato su font-size). Le dimensioni in em annidate si moltiplicano: una lista da 1.2em dentro una lista da 1.2em finisce per essere 1.44 volte la base. rem non si somma mai, ed è per questo che la maggior parte dei design system lo usa.
Meglio px o rem per le dimensioni dei font?
Usa rem. Il testo impostato in px ignora l'impostazione della dimensione del font predefinita del browser, che alcune persone aumentano per leggere comodamente. Lo zoom della pagina funziona comunque con i px, ma la preferenza sulla dimensione del font no, quindi rem è la scelta più accessibile.
Come corrispondono le classi Tailwind ai rem?
Nella scala di spaziatura predefinita di Tailwind, ogni step vale 0.25rem, cioè 4px con una radice di 16px. Quindi p-4 è 1rem (16px) e gap-6 è 1.5rem (24px). Le dimensioni dei font usano invece dei nomi: text-sm è 0.875rem e text-base è 1rem. La tabella in questa pagina riporta la classe per ogni dimensione presente nella scala predefinita.
Questo strumento invia il mio CSS da qualche parte?
No. Ogni conversione avviene nel tuo browser e niente di ciò che scrivi o incolli viene caricato.
Perché esiste rem
In CSS i pixel sono unità fisse. Un titolo impostato a 32px resta di 32px anche quando un visitatore ha chiesto al proprio browser di usare un testo più grande. L'unità rem risolve il problema legando le dimensioni alla dimensione del font radice, che per impostazione predefinita segue l'impostazione del visitatore. Cambi un solo numero e ogni dimensione in rem della pagina si adatta di conseguenza.
Per questo rem è adatto a tipografia, padding, margini e larghezze delle colonne di testo. I pixel hanno ancora senso per ciò che non deve scalare con il testo, come un divisore da 1px o le dimensioni di un'immagine con misure in pixel fisse.
rem ed em a confronto
L'esempio dal vivo in questa pagina imposta la stessa dimensione 1.25 su tre livelli annidati, una volta in em e una volta in rem. La versione in em cresce a ogni livello perché ogni figlio moltiplica la dimensione del genitore. La versione in rem resta uguale a ogni profondità perché fa sempre riferimento alla radice.
em resta utile quando qualcosa deve scalare con il proprio testo, come il padding dentro un pulsante o lo spazio dopo un'icona. Imposta la dimensione del font del pulsante in rem e il suo padding in em: cambiando la dimensione del font si ridimensiona l'intero pulsante.
Dimensioni fluide con clamp()
clamp(min, preferred, max) sceglie il valore preferito ma non scende mai sotto il minimo né sale sopra il massimo. Usare un mix di rem e vw per il valore preferito fa crescere un titolo in modo fluido con la larghezza della finestra, rispettando comunque la dimensione del font dell'utente.
L'helper calcola la retta tra due punti, ad esempio 32px su un telefono largo 375px e 56px su un desktop da 1280px, e la scrive come un'espressione rem più vw. Prova il risultato a diverse larghezze, perché pendenze in vw molto ripide possono far crescere il testo più in fretta della lunghezza delle righe.
Converti
Dimensione del font radice (px)
Pixel
(radice {n}px)
Copia rem
Copia px
Radice {n}px
Converti un blocco CSS
CSS con px
Lo stesso CSS in rem
Mantieni i valori da 1px in px
Copia il CSS convertito
Dimensione fluida con clamp()
Dimensione minima (px)
Dimensione massima (px)
Da larghezza (px)
A larghezza (px)
Inserisci dimensioni maggiori di zero e una larghezza A maggiore della larghezza Da.
Copia clamp()
Ridimensiona la finestra per vedere crescere questa riga.
em si moltiplica, rem no
Ogni livello qui sotto imposta font-size: 1.25 nella sua unità, annidato su tre livelli.
Livello {n}
Tabella completa da px a rem
Radice {n}px. Clicca su una riga per copiarne il valore in rem.
Le classi Tailwind sono mostrate solo con una radice di 16px, la dimensione su cui è costruita la loro scala.
Copiato {v}.
Da px a rem con radice di {n}px, da 1 a 128 pixel, con classi Tailwind