Convertitore di unità CSS

Convertitore di unità CSS - Calcolatore px, rem, em, %

🎨 Converti tra unità CSS: pixel (px), rem, em, percentuali (%), punti (pt) e unità viewport (vw, vh). Strumento essenziale per lo sviluppo e il design web responsive.

Tipi di unità CSS

• Unità assolute: px, pt, cm, mm, in - dimensione fissa indipendente dal contesto
• Unità relative: rem, em, %, vw, vh - scalano in base al genitore o al viewport
• Relative al font: rem, em, ch, ex - basate sulla dimensione del font
• Relative al viewport: vw, vh, vmin, vmax - basate sulle dimensioni del viewport

Spiegazione delle unità

• px (pixel): 1px = 1 pixel del dispositivo. Unità assoluta, precisa ma non scalabile.
• rem: Relativo all’elemento root (html). 1rem = 16px di default.
• em: Relativo al font dell’elemento genitore. Può accumularsi in elementi annidati.
• %: Relativo alla proprietà dell’elemento genitore. 100% = uguale al genitore.
• pt (punti): Unità di stampa. 1pt = 1/72 di pollice ≈ 1,333px.
• vw: 1vw = 1% della larghezza del viewport. 100vw = piena larghezza.
• vh: 1vh = 1% dell’altezza del viewport. 100vh = piena altezza.

Conversioni comuni

• 1rem = 16px (impostazione predefinita del browser)
• 1em = 16px (se il genitore è 16px)
• 100% = dimensione dell’elemento genitore
• 12pt = 16px (comune nella stampa)
• 1vw = 19.2px (su viewport 1920px)

Metodo 62,5%

Imposta html { font-size: 62.5%; } per avere 1rem = 10px. Questo semplifica i calcoli: 1.6rem = 16px, 2.4rem = 24px, ecc.

Considerazioni sull’accessibilità

• Usa rem per i font: rispetta le preferenze di dimensione del browser
• Evita px per i font: non scala con le impostazioni utente
• Usa unità relative: rende il design più accessibile con zoom/ingrandimento
• Testa con dimensioni diverse: verifica a 200% di zoom e con testo grande

Design responsive

Usa rem nelle media query: @media (min-width: 48rem) invece di 768px. In questo modo i breakpoint scalano con le preferenze di dimensione del font dell’utente.

💡 Consiglio pro: La best practice moderna è usare rem per la maggior parte delle dimensioni (font, spaziature, breakpoint), px per bordi e dettagli fini, e % o unità viewport per i layout. Evita em per le spaziature perché può accumularsi in modo imprevedibile.