Convertitore di unità CSS

È utile quando una specifica grafica, un foglio di stile, un documento o una libreria di componenti usa un’unità diversa da quella prevista dal progetto. Inserisca il valore, scelga le unità di origine e destinazione e imposti il riferimento in pixel. Il convertitore applica i rapporti CSS standard e restituisce un numero chiaro e un valore CSS pronto da copiare.

Scelga con attenzione origine, destinazione e riferimento

Inserisca innanzitutto la parte numerica della lunghezza CSS senza unità, quindi selezioni l’unità di origine corretta. Scelga px, em, rem o pt come destinazione e fornisca una dimensione base positiva del font in pixel. La base governa ogni conversione da o verso em o rem. Per esempio, con una base di 16 pixel, 2rem equivalgono a 32px e 24px equivalgono a 1.5em. Nel CSS reale, em si riferisce di solito alla dimensione calcolata del font dell’elemento pertinente o del genitore, mentre rem si riferisce all’elemento radice. Poiché lo strumento presenta un solo campo base, Lei deve usare il riferimento adeguato: la dimensione locale per em e quella radice per rem. Le conversioni esclusivamente tra px e pt non dipendono matematicamente dal riferimento, ma il campo resta obbligatorio per mantenere un contratto uniforme ed esplicito. Ciò evita anche di presumere che ogni sito utilizzi una radice di 16px.

Comprenda il percorso di conversione e l’arrotondamento

Il convertitore normalizza il valore di origine in pixel CSS e poi trasforma tali pixel nell’unità richiesta. Le unità relative usano la base indicata: un valore em o rem viene moltiplicato per la base per ottenere pixel, mentre un valore in pixel viene diviso per essa per ottenere em o rem. I punti seguono il rapporto CSS standard di 96 pixel per pollice e 72 punti per pollice; pertanto 1pt equivale a 96 diviso 72 pixel CSS. Il passaggio di ogni coppia supportata attraverso i pixel rende prevedibili anche le conversioni da pt a rem e da em a pt. Lei può scegliere da zero a dodici cifre decimali. L’arrotondamento avviene solo al termine, evitando errori intermedi. La risposta comprende unità normalizzate, base, numero arrotondato e una stringa come 1.5rem. Se origine e destinazione coincidono, viene restituito lo stesso valore validato e arrotondato. I numeri non finiti e le basi minori o uguali a zero vengono rifiutati.

Usi i valori senza perdere l’intento progettuale

Un numero corretto è solo una parte di una buona migrazione CSS. Prima di sostituire le unità in un foglio di stile, stabilisca se la misura originale dovesse scalare con la tipografia. Pixel e punti sono misure CSS sostanzialmente assolute, mentre em e rem partecipano al dimensionamento relativo al font. Convertire un bordo fisso da px a rem ne cambia il comportamento quando l’utente o un tema modifica il font radice; può essere utile per la spaziatura, ma inatteso per le linee sottili. Verifichi le dichiarazioni con le dimensioni minima e massima supportate dall’interfaccia, soprattutto per interlinea, controlli e layout responsivi. In un design system, registri la base di ogni gruppo affinché i valori siano riproducibili. L’API è deterministica e non dipende da rete, casualità o orologio, quindi è adatta a script di build, generatori e test ripetibili. Percentuali, unità viewport, centimetri ed espressioni miste vengono rifiutati anziché stimati. Per calc(), converta separatamente ogni termine compatibile e mantenga la struttura.