Saltar ao contido principal
LibraTool logoLibraTool

Conversor de píxeles a REM de balde

Converte entre px, rem, em, pt, vw, vh e % cun tamaño de fonte base configurable. Inclúe una táboa de referencia para tamaños de píxel comúns.

Funciona sen conexión unha vez cargado
1rem

Contexto (afecta a rem/em/vw/vh/%)

Todas as conversións para 16 px

Marcas máis próximas de Tailwind (en 16px raíz)

Tamaños comúns en px → rem (con base 16px)

Converter CSS pegado

Usos habituais

  • PX a REM para Desenvolvemento WebConverte valores de píxeles en unidades rem para CSS escalable e accesible. Establece o tamaño da fonte base e ve instantaneamente todos os valores equivalentes.
  • Unidades CSS para Deseño ResponsivoConverte entre px, vw, vh e % para crear disposicións que respondan correctamente a diferentes tamaños e orientacións de pantalla.
  • Converte Especificacións de Deseño a Unidades CSSTraduce valores de píxeles de Figma ou Sketch a unidades rem/em para unha implementación CSS limpa e escalable.
  • Referencia de Unidade Tailwind CSSComprende como as clases de tamaño de Tailwind CSS se mapean aos valores de píxeles e rem para unha implementación precisa.
  • Converte Unidades CSS para Follas de Estilo de ImpresiónConverte entre px, pt e rem para consultas de medios de impresión e CSS de saída PDF.

Como funciona

Todas as conversións execútanse enteiramente no teu navegador usando un motor aritmético escrito a man sen dependencias. A ferramenta converte entre sete unidades CSS (px, rem, em, pt, vw, vh e %) encamiñando cada cálculo a través de píxeles como base común, aplicando división ou multiplicación simple contra o tamaño de fonte raíz configurado, o tamaño de fonte do pai ou as dimensións do viewport.

  1. 1
    Establece os teus valores de contexto
    Antes de converter, configuras os catro números que fan que as unidades CSS relativas teñan sentido: tamaño de fonte raíz (16px por defecto, que é o valor por defecto do navegador), tamaño de fonte do elemento pai (para conversións de em e %), e ancho e alto do viewport (para vw e vh). Estes son os mesmos valores que o teu navegador usaría ao resolver CSS en tempo de execución.
  2. 2
    Píxel como intermediario universal
    O conversor primeiro chama a toPixels() para normalizar a túa entrada a un reconto de píxeles en bruto — por exemplo, 1,5rem convértese en 1,5 × baseFontPx, e 50vw convértese en 0,5 × vpWidth. Despois fromPixels() divide ese reconto de píxeles polo factor apropiado para a unidade de destino. As sete unidades móstranse simultaneamente na táboa de conversión.
  3. 3
    Busca do token de Tailwind máis próximo
    Despois de converter, a ferramenta calcula o valor rem e escanea dúas táboas de busca fixas — os trece tokens de tamaño de fonte de Tailwind (text-xs a text-9xl) e a súa escala de espazamento — atopando a coincidencia máis próxima por distancia absoluta. Un signo = significa que o valor é un token exacto; ≈ significa que é a aproximación máis próxima.
  4. 4
    Reescritura por lotes de CSS mediante expresión regular
    O panel de pegar CSS acepta texto CSS en bruto e aplica unha substitución con expresión regular: no modo px→rem coincide con cada token px e substitúe a parte numérica por valor/baseFontPx + rem; no modo rem→px fai o inverso. O reconto de substitucións móstrase para que poidas verificar cantos valores se reescribiron.

Ferramentas relacionadas

📏

Convertidor de unidades

Converte entre unidades de lonxitude, peso, temperatura, área, volume e moito máis.

Próbao
📐

Xerador de CSS clamp()

Xera un valor CSS clamp() fluído para tipografía e espazado adaptable. Establece o tamaño mínimo/máximo e o rango de ventá, ve una previsualización en directo e copia o CSS nunha liña.

Próbao
🟦

Xerador de Grid CSS

Deseña visualmente unha grid CSS — pistas, unidades e espazos — e copia o CSS e HTML xerados.

Próbao

Preguntas frecuentes