Convertitore CSS px ↔ rem
Converti tra le unità CSS px e rem.
px (Pixel)
Un'unità assoluta che rappresenta un pixel sullo schermo. Ha una dimensione fissa ed è limitata per il responsive design.
rem (Root EM)
Un'unità relativa basata sulla dimensione del font dell'elemento radice (html). Vantaggiosa per l'accessibilità e il responsive design.
Formula di conversione
Raccomandazioni d'uso
- • Dimensione font: rem consigliato
- • Spaziatura (margine, padding): rem consigliato
- • Bordo: px utilizzabile
- • Media query: rem consigliato
Guida completa alle unità CSS
Scegliere le giuste unità CSS nello sviluppo web influisce notevolmente sull'esperienza utente e sull'accessibilità. Impara le differenze tra px e rem e come usarle in situazioni appropriate.
📐 Caratteristiche
- • Unità assoluta con corrispondenza 1:1 ai pixel dello schermo
- • Dimensione coerente su tutti i browser
- • Controllo preciso del layout possibile
- • Non influenzato dalle impostazioni dell'utente
✅ Casi d'uso consigliati
- • Spessore del bordo (1px, 2px)
- • Offset dell'ombra
- • Dimensioni delle icone (16px, 24px)
- • Regolazioni precise della spaziatura
⚠️ Attenzione
- • Ignora le impostazioni della dimensione del font dell'utente
- • Può causare problemi di accessibilità
- • Limitato per il responsive design
📐 Caratteristiche
- • Basato sulla dimensione del font dell'elemento radice (html)
- • Riflette le impostazioni dell'utente
- • Mantiene proporzioni coerenti
- • Accessibile
✅ Casi d'uso consigliati
- • Impostazioni della dimensione del font
- • Spaziatura (margine, padding)
- • Dimensioni dei contenitori
- • Punti di interruzione delle media query
💡 Vantaggi
- • Mantiene le proporzioni durante il ridimensionamento
- • Migliora l'accessibilità
- • Facile manutenzione
🎯 Strategia di utilizzo specifica per unità
Tipografia
Usa rem per le dimensioni del font e l'interlinea rem
Layout
Usa rem per la spaziatura e i contenitori rem
Dettagli
Usa px per bordi e ombre px
📱 Consigli per il Responsive Design
Approccio Mobile-first
Imposta la dimensione del font di base a 16px e scala con unità rem
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Utilizzo delle Media Query
Mantieni la coerenza con i punti di interruzione basati su rem
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Considerazioni sull'accessibilità
✅ Pratiche consigliate
- • Imposta le dimensioni del font con unità rem
- • Mantieni una dimensione minima del font di 16px
- • Interlinea sufficiente (1.5 o più)
- • Target di tocco minimo di 44px
❌ Cose da evitare
- • Utilizzo di valori px fissi per le dimensioni del font
- • Testo piccolo inferiore a 12px
- • Larghezze fisse dei contenitori
- • Interlinea di 1.0 o meno
🔧 Supporto browser e compatibilità
Unità px
Supporto perfetto in tutti i browser. Disponibile da IE6+.
Unità rem
Supporto perfetto in IE9+ e browser moderni. Fallback necessario per IE8 e precedenti.
Per il supporto di IE8: Dichiara prima il valore px, quindi aggiungi il valore rem come fallback
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */