Convertitore di unità CSS (px / rem / em / vh / vw)

Perché usare rem invece di px

I browser partono da 16px, ma chi ha problemi di vista spesso aumenta la dimensione predefinita dei caratteri nelle impostazioni del browser. Il testo dimensionato in rem cresce insieme a questa impostazione; quello dimensionato in px no. Lo zoom della pagina ingrandisce entrambi, ma è l'impostazione della dimensione dei caratteri quella su cui fanno affidamento molti lettori, e il criterio WCAG sul ridimensionamento del testo richiede che il testo aumenti fino al 200% senza perdita di contenuto. Dimensiona il testo e la spaziatura attorno a esso in rem e usa px per linee sottili e bordi.

La colonna em e l'annidamento

Un em è relativo alla dimensione dei caratteri dell'elemento stesso, che per font-size corrisponde a quella dell'elemento genitore. I valori em qui mostrati presuppongono che il genitore abbia la dimensione radice, cosa vera solo al livello superiore. Dentro un elemento 0.875em, un altro 0.875em produce di nuovo 12.25px invece di 14px e il ridimensionamento si accumula. Per questo rem è il predefinito più sicuro, mentre em è adatto alla spaziatura che deve scalare insieme al testo del componente.

La base al 62,5% e le unità del viewport

Impostare html { font-size: 62.5% } fa sì che 1rem equivalga a 10px, semplificando i calcoli; inserisci 10 come dimensione di base per ottenere lo stesso risultato. Questo riduce tutto il resto dimensionato in rem, inclusi i componenti di terze parti, quindi imposta di nuovo una dimensione leggibile su body.

I valori vw e vh presuppongono un viewport di 1440 × 900. Sui telefoni, 100vh può essere più alto dell'area visibile mentre è mostrata la barra degli strumenti del browser; 100svh e 100dvh sono le unità che ne tengono conto.

Come usarlo

1. Inserisci un valore in pixel (px) e la dimensione base radice (predefinita: 16px).
2. Controlla i valori calcolati in rem, em, vw e vh.
3. Copia gli snippet CSS pronti all’uso oppure consulta la tabella delle scale.

Privacy e limitazioni

Funziona istantaneamente in JavaScript lato client.