Convertitore di unità CSS
Converti tra unità CSS: px, rem, em, vw, vh e %. Configura la dimensione del font di base e le dimensioni del viewport per risultati precisi.
Impostazioni
Tutti gli equivalenti
| Unità | Valore |
|---|---|
| px | 16px |
| rem | 1rem |
| em | 1em |
| vw | 0.833333vw |
| vh | 1.48148vh |
| % | 100% |
= 16 px
Riferimento rapido (px → rem)
| px | rem | em | vw | vh |
|---|---|---|---|---|
| 8px | 0.5rem | 0.5em | 0.416667vw | 0.740741vh |
| 12px | 0.75rem | 0.75em | 0.625vw | 1.11111vh |
| 14px | 0.875rem | 0.875em | 0.729167vw | 1.2963vh |
| 16px | 1rem | 1em | 0.833333vw | 1.48148vh |
| 18px | 1.125rem | 1.125em | 0.9375vw | 1.66667vh |
| 20px | 1.25rem | 1.25em | 1.04167vw | 1.85185vh |
| 24px | 1.5rem | 1.5em | 1.25vw | 2.22222vh |
| 32px | 2rem | 2em | 1.66667vw | 2.96296vh |
| 48px | 3rem | 3em | 2.5vw | 4.44444vh |
| 64px | 4rem | 4em | 3.33333vw | 5.92593vh |
Come convertire le unità CSS
- Imposta la dimensione del font di base (predefinito: 16px) e le dimensioni del viewport
- Inserisci un valore e seleziona la sua unità (px, rem, em, vw, vh o %)
- Visualizza tutti i valori equivalenti nelle altre unità CSS
- Consulta la tabella di riferimento rapido per le conversioni più comuni da px a rem
Casi d'Uso
- •Design responsive: converti valori pixel fissi in unità fluide rem o vw
- •Consegna del design: traduci le specifiche in pixel di Figma/Sketch in valori rem CSS
- •Accessibilità: usa le unità rem affinché il testo rispetti le preferenze di dimensione del font dell'utente
- •Layout: calcola dimensioni relative al viewport per sezioni a larghezza piena
Formula
Le conversioni di unità CSS dipendono dalla dimensione del font di base e dalle dimensioni del viewport. rem = px / baseFontSize. vw = px / viewportWidth × 100. vh = px / viewportHeight × 100.
Domande Frequenti
Qual è la differenza tra rem e em?
rem è relativo alla dimensione del font dell'elemento radice (html). em è relativo alla dimensione del font dell'elemento genitore. A livello radice sono identici.
Qual è la dimensione del font predefinita del browser?
La maggior parte dei browser usa 16px come predefinito. Questo significa che 1rem = 16px a meno che non venga modificata la dimensione del font radice.
Quando dovrei usare vw/vh?
Usa vw (larghezza del viewport) e vh (altezza del viewport) per elementi che devono scalare proporzionalmente alla finestra del browser, come sezioni hero o sfondi a schermo intero.
Come si convertono i px in rem?
Dividi il valore in pixel per la dimensione del font di base. Con il valore predefinito di 16px: 24px ÷ 16 = 1.5rem.
A cosa è relativa l'unità %?
L'unità % dipende dal contesto in CSS. Per font-size è relativa al font-size del genitore. Per width è relativa alla larghezza del genitore.