Vai al contenuto
Logo CrateX.app

CrateX.app

Convertitore di unità CSS

Convertitore di unità CSS

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.

px (pixel)
px
Tocca per cambiare unità

Unità di lunghezza

Tipografia

Unità viewport

Percentuale

rem (relativa al font root)
rem
Tocca per cambiare unità

Unità di lunghezza

Tipografia

Unità viewport

Percentuale
Convertitore di unità CSS

Avvio rapido

1
Inserisci un valore e scegli l’unità, ad esempio 16 + px oppure 1 + rem
2
Seleziona l’unità di partenza, inserisci il valore e poi scegli l’unità di arrivo; usa “Scambia” per invertirle rapidamente.
3
Su mobile: usa la freccia nell’angolo in alto a destra del pannello per passare tra unità di partenza/arrivo.
4
Le impostazioni sono disponibili per rem/em/%/vw/vh ecc.; per le unità assolute vengono disabilitate.
5
Visualizza i risultati: le altre unità vengono convertite in tempo reale e possono essere copiate con un clic
6
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

Scenario aggiuntivo

rem in px, convertitore em e unità viewport possono essere gestiti nello stesso flusso, così da verificare il risultato prima di copiarlo o esportarlo.

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

4

Continua con questi strumenti correlati per il passaggio successivo.