Convertitore di unità CSS
Converti valori px, rem, em e pt con dimensioni del carattere configurabili per la radice e per l'elemento. Tutto nel browser, senza upload.
🔒 Funziona interamente nel tuo browser — nulla viene caricatoCosa fa il Convertitore di unità CSS
Il Convertitore di unità CSS traduce i valori tra px, rem, em e pt con dimensioni di base configurabili. È utile quando porti un design token in CSS, controlli le scale tipografiche, converti un vecchio foglio di stile, confronti valori in punti orientati alla stampa o decidi se un componente debba usare dimensioni relative alla radice o all'elemento. Inserisci un valore di partenza, scegli la sua unità, imposta le dimensioni del carattere della radice e dell'elemento e i valori equivalenti si aggiornano subito. Il convertitore tratta rem come relativo alla dimensione del carattere della radice ed em come relativo alla dimensione del carattere dell'elemento corrente.
La conversione tra pixel e punti usa la relazione CSS per cui un punto equivale a un pixel e un terzo, quindi un pixel è uguale a 0,75 punti. Vedere tutti gli equivalenti insieme rende più facile capire se un token di spaziatura o di dimensione del carattere è coerente con il resto di una scala. Il pulsante di copia crea un riepilogo compatto su più righe per note, pull request o revisioni dei token.
Flusso di lavoro privato nel browser
Tutta l'elaborazione avviene nel tuo browser con JavaScript lato client. Lo strumento non carica su alcun server snippet, valori di configurazione, dati generati, testo di query o esempi copiati e non richiede un account. Questo modello solo locale conta per le utility per sviluppatori, perché il contenuto incollato assomiglia spesso a dati applicativi reali: risposte API, log, esempi simili a variabili d'ambiente, query di database, markup di bozze o valori copiati da sessioni di debug in produzione. Mantenere la trasformazione in locale riduce il rischio e rende l'interazione veloce, perché non c'è alcuna richiesta di rete.
L'interfaccia è volutamente compatta: puoi incollare l'input, regolare le opzioni, controllare l'output, copiarlo e tornare al tuo editor. I risultati vanno comunque rivisti prima di essere sottoposti a commit, condivisi pubblicamente o usati in un flusso di produzione. Gli strumenti del browser sono ottimi per ispezioni e preparazioni rapide, ma non possono conoscere ogni convenzione di progetto, regola di classificazione dei dati o requisito di validazione specifico dell'applicazione.
Consigli pratici
Usa rem per i valori che devono seguire la radice del documento, come dimensioni del carattere accessibili e spaziature di layout legate alle preferenze dell'utente. Usa em quando un valore deve scalare con la dimensione del carattere del componente stesso, ad esempio per l'allineamento di icone, il padding locale o la tipografia annidata. Usa px con attenzione per bordi precisi, risorse raster e casi in cui non si desidera una scala relativa. Le dimensioni calcolate reali possono essere influenzate da impostazioni del browser, ereditarietà, zoom, media query e stili specifici del contenitore, quindi verifica i valori importanti negli strumenti per sviluppatori.
Come usare
- Inserisci il valoreDigita il numero di partenza e scegli px, rem, em o pt.
- Imposta le basiRegola le dimensioni del carattere della radice e dell'elemento, se necessario.
- Leggi gli equivalentiCopia i valori convertiti in px, rem, em e pt.