Vés al contingut principal
LibraTool logoLibraTool

Convertidor de píxels a REM de franc

Converteix entre px, rem, em, pt, vw, vh i % amb una mida de lletra base configurable. Inclou una taula de referència per a mides de píxels habituals.

Funciona sense connexió un cop carregat
1rem

Context (afecta rem/em/vw/vh/%)

Totes les conversions per a 16 px

Tokens Tailwind més propers (a 16px root)

Mides de píxels comunes → rem (base 16px)

Convertir CSS enganxat

Usos habituals

  • PX a REM per a desenvolupament webConvertiu valors de píxels a unitats rem per a CSS escalable i accessible. Establiu la mida de la font base i vegueu instantàniament tots els valors equivalents.
  • Unitats CSS per a disseny responsiuConvertiu entre px, vw, vh i % per construir dissenys que s'adaptin correctament a diferents mides de pantalla i orientacions.
  • Convertiu especificacions de disseny a unitats CSSTraduïu valors de píxels de Figma o Sketch a unitats rem/em per a una implementació CSS neta i escalable.
  • Referència d'unitat Tailwind CSSEnteneu com les classes de mida de Tailwind CSS es mapegen a valors de píxel i rem per a una implementació precisa.
  • Convertiu unitats CSS per a fulls d'estil d'impressióConvertiu entre px, pt i rem per a consultes de mitjans impresos i sortida CSS de PDF.

Com funciona

Totes les conversions s'executen completament al teu navegador utilitzant un motor aritmètic escrit a mà sense dependències. L'eina converteix entre set unitats CSS (px, rem, em, pt, vw, vh, i %) encaminant cada càlcul a través de píxels com a base comuna, aplicant divisió o multiplicació simple contra la mida de font arrel, la mida de font del pare, o les dimensions de la vista que hagis configurat.

  1. 1
    Estableix els teus valors de context
    Abans de convertir, configures els quatre números que fan que les unitats CSS relatives tinguin significat: mida de font arrel (16px per defecte, que és el valor per defecte del navegador), mida de font de l'element pare (per a conversions em i %), i amplada i alçada de la vista (per a vw i vh). Aquests són els mateixos valors que utilitzaria el teu navegador en resoldre CSS en temps d'execució.
  2. 2
    El píxel com a intermediari universal
    El conversor primer crida toPixels() per normalitzar la teva entrada a un recompte de píxels en brut — per exemple, 1,5rem esdevé 1,5 × baseFontPx, i 50vw esdevé 0,5 × vpWidth. Després fromPixels() divideix aquest recompte de píxels pel factor apropiat per a la unitat objectiu. Les set unitats es mostren simultàniament a la taula de conversió.
  3. 3
    Consulta del token de Tailwind més proper
    Després de convertir, l'eina calcula el valor rem i escaneja dues taules de consulta codificades — els tretze tokens de mida de font de Tailwind (text-xs fins a text-9xl) i la seva escala d'espaiat — trobant la coincidència més propera per distància absoluta. Un signe = significa que el valor és un token exacte; ≈ significa que és l'aproximació més propera.
  4. 4
    Reescriptura massiva de CSS via expressió regular
    El panell d'enganxar CSS accepta text CSS en brut i aplica una substitució d'expressió regular: en mode px→rem coincideix amb cada token px i reemplaça la part numèrica amb valor/baseFontPx + rem; en mode rem→px fa l'invers. El recompte de substitucions es mostra perquè puguis verificar quants valors s'han reescrit.

Eines relacionades

📏

Convertidor d'unitats

Converteix entre unitats de longitud, pes, temperatura, àrea, volum i més.

Prova-ho
📐

Generador de clamp() CSS

Genera un valor clamp() CSS fluid per a tipografia i espaiat responsius. Estableix les mides mínima/màxima i el rang de viewport, veu una previsualització en viu i copia el CSS d'una sola línia.

Prova-ho
🟦

Generador de CSS Grid

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Prova-ho

Preguntes freqüents