Pixel da rimuovere
Convert pixel values to rem for modern CSS layouts. rem scales with the user's root font size — better for accessibility than fixed px. Default browser root is often 16 px, so 24 px = 1.5 rem unless the project overrides html { font-size }.
Pixel
Dimensione font root (px)
Risultato
1rem
How to convert px to rem
1. Enter the pixel value from your design (e.g. 32 px).
2. Set the root font size (default 16 px if unchanged).
3. Copy the rem result into your stylesheet.
4. Use rem for font sizes, spacing, and component scale; px for hairline borders if needed.
Esempi da Px a REM
Tipo di corpo e intestazione
16 px = 1 rem (predefinito). 24 px = intestazione 1,5 rem. 14 px = 0,875 rem testo piccolo.
Root personalizzato 10 px (sistemi di progettazione)
Alcuni team impostano html { font-size: 62.5% } quindi 1 rem = 10 px. Quindi token di design da 32 px = 3,2 rem.
Scala di spaziatura
Griglia da 8 px → 0,5 rem alla radice di 16 px. Imbottitura di 16 px = 1 rem; ritmo coerente in scale simili a Tailwind.
Quando convertire px in rem
• Quando implementi le specifiche Figma in responsivo CSS con zoom accessibile.
• Quando ti allinei ai token del sistema di progettazione definiti in rem.
• Quando gli utenti sovrascrivono la dimensione del carattere predefinita del browser, i layout rem si adattano.
Quando scegliere altro
• Quando ne hai bisogno rispetto a un carattere di un componente nidificato, usa i pixel per em.
• Quando sono necessarie unità viewport (vw/vh) per layout a schermo intero.
• Quando corrispondi i pixel del dispositivo 1:1 sui bordi della retina: i bordi di 1 px spesso rimangono in px.
rem vs em nel componente CSS
em si compone all'interno di elementi nidificati con dimensioni di carattere diverse: il riempimento in em cresce con il testo locale. rem rimane legato a root, fornendo una spaziatura prevedibile tra i componenti. Molti team utilizzano rem per la scala del layout ed em solo per la spaziatura delle lettere o i microaggiustamenti legati al tipo locale.
Flusso di lavoro di consegna della progettazione
I designer esportano px da Figma; gli sviluppatori dividono per root concordato (documento in README). Quando il progetto utilizza il trucco del 62,5%, conferma prima della conversione: mescolare le ipotesi raddoppia o dimezza l'interfaccia utente.
Domande frequenti
Cos'è REM?
rem = "radice em". 1 rem equivale alla dimensione del carattere dell'elemento html, non del genitore.
Perché non usare px ovunque?
I px fissi ignorano le preferenze dei caratteri dell'utente. rem rispetta il ridimensionamento root per l'accessibilità (WCAG).
Dimensione del carattere root predefinita?
La maggior parte dei browser ha come impostazione predefinita 16 px su HTML. Gli utenti possono modificarlo nelle impostazioni.
Formula?
rem = px ÷ rootFontSizePx. Esempio: 20 px ÷ 16 = 1,25 rem.
Rem funziona per margini e imbottitura?
Sì: rem si applica a qualsiasi proprietà di lunghezza CSS, non solo alla dimensione del carattere.
I dati vengono caricati?
No. La conversione viene eseguita localmente.