Convertitore unità CSS

Converti tra unità CSS: px, rem, em, vw, vh, pt, cm e altro

Che cos'è e come funziona?

Un convertitore di unità CSS traduce una dimensione tra le unità che CSS usa per il layout — px, rem, em, vw, vh, pt, cm e altre — così sposti un valore in modo pulito da un'unità a un'altra. CSS offre molte unità perché rispondono a esigenze diverse: i pixel sono fissi e assoluti, rem ed em sono relativi alle dimensioni del font per una tipografia scalabile, e vw e vh sono relativi al viewport per layout responsive. Convertire tra esse ti permette di esprimere la stessa dimensione nell'unità che una particolare regola dovrebbe usare.

Le conversioni che contano di più sono quelle relative, perché dipendono dal contesto: un rem è multipli della dimensione del font radice (comunemente 16px), un em è relativo alla dimensione del font dell'elemento stesso, e le unità di viewport sono percentuali della finestra. Quella dipendenza è proprio ciò che rende la conversione a mano soggetta a errori — 1,5rem sono solo 24px se la radice è 16px. Questo strumento gestisce le dimensioni base per te così ottieni valori accurati, aiutandoti a costruire stili scalabili e responsive invece di fissare pixel ovunque. Gira nel browser.

Casi d'uso

• Passare a unità scalabili: converti un valore in pixel in rem così la tua spaziatura e il testo scalano con l'impostazione della dimensione del font dell'utente.
• Abbinare un design in unità diverse: trasforma la misura in px di un designer nel rem o em che il tuo foglio di stile usa.
• Lavorare con unità responsive: vedi a quanti pixel equivale un valore vw o vh a una data dimensione di viewport.

Domande frequenti

Che differenza c'è tra px, rem ed em?

Un pixel (px) è un'unità fissa e assoluta. Un rem è relativo alla dimensione del font dell'elemento radice, quindi scala in modo coerente su tutta la pagina. Un em è relativo alla dimensione del font dell'elemento corrente, quindi può accumularsi quando annidato. rem è di solito preferito per un dimensionamento prevedibile e scalabile.

Quanti pixel sono 1rem?

Dipende dalla dimensione del font radice. Per impostazione predefinita i browser usano 16px, quindi 1rem equivale a 16px e 1,5rem a 24px — ma se la dimensione del font radice cambia, ogni valore rem cambia con essa. Quella dipendenza dalla base è il motivo per cui questo convertitore chiede o assume una dimensione radice.

Quando dovrei usare vw e vh?

Le unità di viewport (vw, vh) sono percentuali della larghezza e altezza della finestra, quindi sono ideali per elementi che devono scalare con lo schermo — sezioni a tutta altezza, testo hero fluido o spaziatura responsive. Cambiano al ridimensionamento del viewport, a differenza dei valori px fissi.

Perché usare unità relative invece dei pixel?

Le unità relative come rem rispettano le preferenze di dimensione del font dell'utente e scalano con eleganza tra i dispositivi, il che migliora accessibilità e reattività. Fissare pixel ovunque ignora quelle impostazioni e rende i layout rigidi, ecco perché convertire in unità relative spesso vale la pena.

CSS

Generatore ombra box CSS · Generatore raggio bordo CSS · Generatore Flexbox · Generatore CSS Grid · Generatore ombra testo CSS · Generatore animazioni CSS