Convertitore Unità CSS

Riferimento

Unità CSS

CSS offre unità assolute e relative. Le unità assolute come px sono fisse indipendentemente dal contesto. Le unità relative come rem, em e vw si adattano in base a un riferimento — essenziali per layout responsivi e accessibili.

px, rem, em, vw

px (pixel) — unità assoluta. 1px equivale a un pixel indipendente dal dispositivo. Usa per bordi, ombre ed elementi che non devono scalare con la dimensione del font.

rem (root em) — relativo alla dimensione del font dell'elemento radice (html). La dimensione radice predefinita del browser è 16px. Preferito per dimensioni del font e spaziature perché rispetta le impostazioni del browser dell'utente.

em — relativo alla dimensione del font dell'elemento padre. Può accumularsi in elementi annidati. Utile per padding e margini che devono scalare con la dimensione del font dell'elemento stesso.

vw (larghezza viewport) — 1vw = 1% della larghezza del viewport. Ideale per tipografia fluida e layout a larghezza intera che si adattano alle dimensioni dello schermo.

Conversioni comuni da px a rem

Con la base predefinita del browser di 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Per le unità viewport su un design di 1440px: 14.4px = 1vw, 72px = 5vw.

Perché rem è preferito per l'accessibilità

Usare rem per le dimensioni del font rispetta la preferenza di dimensione del font del browser dell'utente. Quando un utente imposta il browser a 20px invece del predefinito 16px, i layout basati su rem si scalano proporzionalmente mentre i layout basati su px restano fissi. WCAG 1.4.4 (Ridimensionamento testo) richiede che il testo possa essere ridimensionato fino al 200% senza perdita di contenuto o funzionalità — le unità rem soddisfano naturalmente questo requisito.

Privacy

Tutte le conversioni vengono eseguite 100% nel tuo browser. Nessun dato viene inviato a nessun server.