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.
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.
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.
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.