Convertitore di unità CSS

Supporta la conversione tra unità CSS come px, em, rem, %, vw, vh, fornendo impostazioni di breakpoint reattivi. Calcola automaticamente i valori dipendenti dal contesto, adatto per lo sviluppo di layout reattivi, implementazione frontend e adattamento dello stile.

Istruzioni d’uso

🚀 Avvio rapido

Inserisci un valore e scegli l’unità, ad esempio 16 + px oppure 1 + rem
Seleziona l’unità di partenza, inserisci il valore e poi scegli l’unità di arrivo; usa “Scambia” per invertirle rapidamente.
Su mobile: usa la freccia nell’angolo in alto a destra del pannello per passare tra unità di partenza/arrivo.
Le impostazioni sono disponibili per rem/em/%/vw/vh ecc.; per le unità assolute vengono disabilitate.
Visualizza i risultati: le altre unità vengono convertite in tempo reale e possono essere copiate con un clic
Breakpoint: passa tra preset mobile/tablet/desktop per verificare le conversioni su diversi schermi

📌 Scenari comuni

Utilità: layout responsive, collaborazione design‑frontend, corrispondenza schermo/stampa e uniformità nelle convenzioni di stile

🧭 Consigli d'uso

Definisci una base: 16 px come font root è una scelta comune che facilita il calcolo mentale rem ↔ px
Per il testo si consiglia rem: facilita la scalabilità globale e l’accessibilità; per i componenti locali si può usare em per scalare in modo relativo
Per il layout, usa vw/vh/vmin/vmax combinati con breakpoint e valori min/max per evitare distorsioni estreme
Arrotondamento: i risultati mantengono una precisione ragionevole per evitare numeri troppo lunghi e poco leggibili

🎛️ Parametri di conversione e contesto

Base REM (Root Font Size): determina il rapporto rem ↔ px. In ambito web 16 px è un valore comune che facilita il calcolo (1 rem ≈ 16 px). Se il design non usa 16 px come base, puoi modificarlo per stimare rapidamente i valori rem.
Base EM (Parent Font Size): determina il rapporto em e % (quando il riferimento è “dimensione del font”). È utile per ridimensionare un componente: modificando il font del genitore tutto scala in proporzione.
Riferimento %: scegli “dimensione del font/larghezza/altezza” come base per %. Per il layout usa larghezza/altezza; per la tipografia (ad es. line-height) scegli dimensione del font.
Preset di breakpoint: Mobile/Tablet/Desktop/Schermo grande impostano automaticamente larghezza/altezza della viewport per verificare le conversioni. È solo una stima, non sostituisce le media query reali.
Dimensioni viewport: servono per convertire vw/vh/vmin/vmax e % (se basato su larghezza/altezza). Su dispositivi reali intervengono anche barra degli indirizzi, safe area e scrollbar, quindi piccole differenze sono normali.
DPI (punti per pollice): usato per la conversione tra unità fisiche pt/pc/in/cm/mm/q e px. Il valore predefinito per il web è 96 DPI; per stampa o dispositivi ad alta densità impostalo in base al dispositivo, altrimenti la conversione è solo approssimativa.
Suggerimenti: 1) usa spesso 16 px e 96 DPI come base; 2) per le percentuali di layout verifica i risultati con i preset di breakpoint; 3) questi parametri servono per una conversione rapida in fase di progettazione/comunicazione e non sostituiscono il calcolo finale del browser su DOM/CSS reali.

⚠️ Limitazioni e compatibilità

Il riferimento di % dipende dalla proprietà (width/height/line-height seguono regole diverse); questo strumento fornisce una stima basata sui casi più comuni
ex/ch si basano sulle metriche del font, quindi il risultato può variare tra font e browser diversi
Le unità di viewport sono influenzate da barra degli indirizzi, scrollbar e safe area; i valori reali possono discostarsi leggermente dal design
La conversione tra unità fisiche e px varia con il DPI: per stampa/dispositivi ad alta densità fai sempre riferimento a prove reali

🔒 Privacy e sicurezza

Tutte le elaborazioni avvengono nel tuo browser; i dati non lasciano mai il tuo dispositivo.

❓ Domande frequenti

Qual è la differenza tra rem ed em?

rem è relativo al font root, più prevedibile e adatto alla scalabilità globale; em è relativo al font del genitore, ideale per scalare i componenti localmente.

Meglio usare px o rem?

Per layout e tipografia si preferisce rem per migliorare l’accessibilità; px resta utile per dettagli come icone e bordi dove serve l’allineamento al pixel.

Perché vw/vh assumono valori diversi su dispositivi differenti?

Su mobile barra degli indirizzi, safe area e scrollbar cambiano la dimensione effettiva della viewport. Combina vw/vh con clamp()/min()/max() e breakpoint per gestire meglio gli estremi.

Come convertire i pixel dello schermo in unità di stampa?

Occorre impostare il DPI (ad es. 96/72/300). La conversione schermo→stampa è solo indicativa: il risultato finale dipende da prove di stampa e dal flusso ICC.