Vai al contenuto principale
LibraTool logoLibraTool

Convertitore Pixel in REM gratis

Converti tra px, rem, em, pt, vw, vh e % con una dimensione del carattere base configurabile. Include una tabella di riferimento per le dimensioni in pixel comuni.

Funziona offline una volta caricato
1rem

Contesto (influisce su rem/em/vw/vh/%)

Tutte le conversioni per 16 px

Token Tailwind più vicini (a radice 16px)

Dimensioni pixel comuni → rem (base 16px)

Converti CSS incollato

Usi comuni

  • PX in REM per lo Sviluppo WebConverti i valori dei pixel in unità rem per CSS scalabile e accessibile. Imposta la dimensione del carattere di base e vedi istantaneamente tutti i valori equivalenti.
  • Unità CSS per il Design ReattivoConverti tra px, vw, vh e % per costruire layout che rispondono correttamente a diverse dimensioni e orientamenti dello schermo.
  • Converti le Specifiche di Design alle Unità CSSTraduci i valori dei pixel di Figma o Sketch in unità rem/em per un'implementazione CSS pulita e scalabile.
  • Riferimento alle Unità Tailwind CSSComprendi come le classi di dimensionamento di Tailwind CSS si mappano sui valori di pixel e rem per un'implementazione precisa.
  • Converti le Unità CSS per i Fogli di Stile di StampaConverti tra px, pt e rem per query multimediali di stampa e CSS di output PDF.

Come funziona

Tutte le conversioni funzionano interamente nel tuo browser usando un motore aritmetico scritto a mano senza dipendenze. Lo strumento converte tra sette unità CSS (px, rem, em, pt, vw, vh, e %) instradando ogni calcolo attraverso i pixel come base comune, applicando semplice divisione o moltiplicazione rispetto alla dimensione font radice, dimensione font genitore, o dimensioni viewport che hai configurato.

  1. 1
    Imposta i tuoi valori di contesto
    Prima di convertire, configuri i quattro numeri che rendono significative le unità CSS relative: dimensione font radice (predefinita 16px, che è la predefinita del browser), dimensione font dell'elemento genitore (per le conversioni em e %), e larghezza e altezza del viewport (per vw e vh). Questi sono gli stessi valori che il tuo browser userebbe risolvendo CSS a runtime.
  2. 2
    Pixel come intermediario universale
    Il convertitore prima chiama toPixels() per normalizzare il tuo input a un conteggio di pixel grezzo — ad esempio, 1,5rem diventa 1,5 × baseFontPx, e 50vw diventa 0,5 × vpWidth. Poi fromPixels() divide quel conteggio di pixel per il fattore appropriato per l'unità target. Tutte e sette le unità sono mostrate simultaneamente nella tabella di conversione.
  3. 3
    Ricerca del token Tailwind più vicino
    Dopo la conversione, lo strumento calcola il valore rem e scansiona due tabelle di ricerca codificate a mano — i tredici token di dimensione font di Tailwind (text-xs fino a text-9xl) e la sua scala di spaziatura — trovando la corrispondenza più vicina per distanza assoluta. Un segno = significa che il valore è un token esatto; ≈ significa che è l'approssimazione più vicina.
  4. 4
    Riscrittura CSS in batch tramite regex
    Il pannello incolla-CSS accetta testo CSS grezzo e applica una sostituzione regex: in modalità px→rem trova ogni token px e sostituisce la parte numerica con valore/baseFontPx + rem; in modalità rem→px fa l'inverso. Il conteggio delle sostituzioni viene mostrato così puoi verificare quanti valori sono stati riscritti.

Strumenti correlati

📏

Convertitore unità

Converti tra unità di lunghezza, peso, temperatura, area, volume e altro.

Prova
📐

Generatore CSS clamp()

Genera un valore CSS clamp() fluido per tipografia e spaziatura responsive. Imposta dimensioni minima/massima e intervallo di viewport, visualizza un'anteprima live e copia il CSS in un'unica riga.

Prova
🟦

Generatore CSS Grid

Progetta visivamente una griglia CSS — tracce, unità e spazi — e copia il CSS e HTML generati.

Prova

Domande frequenti