Convertitore Unità CSS

Cos'è la Conversione di Unità CSS?

Un convertitore di unità CSS è uno strumento che traduce i valori di lunghezza tra i diversi sistemi di misurazione CSS. Il CSS definisce oltre una dozzina di unità di lunghezza, suddivise in due gruppi: unità assolute come px, pt, cm e in che corrispondono a misure fisiche fisse, e unità relative come rem, em, vw, vh e % che dipendono dal contesto, come la dimensione del font o le dimensioni del viewport.

I browser risolvono tutte le lunghezze CSS in pixel durante il rendering. Quando scrivi 1.5rem, il browser moltiplica 1.5 per la dimensione del font radice (tipicamente 16px) per ottenere 24px. Quando scrivi 50vw, prende la metà della larghezza corrente del viewport. Comprendere queste relazioni è necessario per costruire layout che scalino su diversi dispositivi e rispettino le preferenze dell'utente, come le dimensioni del font personalizzate impostate nel browser.

La specifica CSS Values and Units Module Level 4 (W3C) definisce i rapporti di conversione esatti tra tutte le unità assolute: 1in = 96px = 72pt = 2.54cm = 25.4mm. Le unità relative non hanno un rapporto fisso perché dipendono dal contesto di esecuzione. Un convertitore di unità CSS gratuito ti consente di calcolare istantaneamente queste relazioni in base alla tua specifica dimensione del font radice e alle dimensioni del viewport, senza scrivere alcun codice.

Perché Usare un Convertitore di Unità CSS?

Convertire manualmente tra unità CSS significa ricordare rapporti, aprire una calcolatrice e ricontrollare i calcoli. Questo strumento esegue la conversione nel tuo browser senza alcuna difficoltà.

Casi d'Uso del Convertitore di Unità CSS

Riferimento alle Unità di Lunghezza CSS

Il CSS definisce 10 unità di lunghezza comunemente utilizzate. Le unità assolute hanno una conversione fissa in pixel. Le unità relative dipendono dal contesto: la dimensione del font radice per rem, la dimensione del font del genitore per em, e il viewport del browser per vw e vh.

Unità CSS Assolute vs Relative

La scelta tra unità assolute e relative influisce su come il tuo layout risponde a schermi diversi e alle impostazioni dell'utente. Ogni gruppo presenta vantaggi e svantaggi distinti.

Tabella di Conversione Comune px → rem

Questa tabella assume una dimensione del font radice di 16px (il valore predefinito del browser). Se il tuo progetto usa una base diversa, dividi il valore in pixel per la tua base per ottenere l'equivalente in rem.

Esempi di Codice

Questi esempi mostrano come convertire unità CSS a livello di codice in JavaScript, Python, proprietà personalizzate CSS e Sass.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

Domande Frequenti