Saltar al contenido principal
LibraTool logoLibraTool

Convertidor de píxeles a REM gratis

Convierta entre px, rem, em, pt, vw, vh y % con un tamaño de fuente base configurable. Incluye una tabla de referencia para tamaños de píxeles comunes.

Funciona sin conexión una vez cargado
1rem

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

Todas las conversiones para 16 px

Tokens Tailwind más cercanos (a 16px raíz)

Tamaños comunes en px → rem (base 16px)

Convertir CSS pegado

Usos habituales

  • PX a REM para Desarrollo WebConvierte valores de píxeles a unidades rem para CSS escalable y accesible. Establece tu tamaño de fuente base y ve instantáneamente todos los valores equivalentes.
  • Unidades CSS para Diseño ResponsivoConvierte entre px, vw, vh y % para construir diseños que respondan correctamente a diferentes tamaños y orientaciones de pantalla.
  • Convertir Especificaciones de Diseño a Unidades CSSTraduce valores de píxeles de Figma o Sketch a unidades rem/em para una implementación CSS limpia y escalable.
  • Referencia de Unidades de Tailwind CSSComprende cómo las clases de tamaño de Tailwind CSS se asignan a valores de píxeles y rem para una implementación precisa.
  • Convertir Unidades CSS para Hojas de Estilo de ImpresiónConvierte entre px, pt y rem para consultas de medios de impresión y CSS de salida PDF.

Cómo funciona

Todas las conversiones se ejecutan enteramente en tu navegador usando un motor aritmético escrito a mano sin dependencias. La herramienta convierte entre siete unidades CSS (px, rem, em, pt, vw, vh y %) enrutando cada cálculo a través de píxeles como base común, aplicando división o multiplicación simple respecto a tu tamaño de fuente raíz configurado, el tamaño de fuente del elemento padre, o las dimensiones del viewport.

  1. 1
    Fija tus valores de contexto
    Antes de convertir, configuras los cuatro números que hacen que las unidades CSS relativas tengan sentido: tamaño de fuente raíz (16px por defecto, el valor predeterminado del navegador), tamaño de fuente del elemento padre (para conversiones de em y %), y ancho y alto del viewport (para vw y vh). Estos son los mismos valores que usaría tu navegador al resolver CSS en tiempo de ejecución.
  2. 2
    El píxel como intermediario universal
    El conversor primero llama a toPixels() para normalizar tu entrada a un recuento de píxeles en bruto; por ejemplo, 1,5rem se convierte en 1,5 × tamañoFuenteBasePx, y 50vw se convierte en 0,5 × anchoVp. Luego fromPixels() divide ese recuento de píxeles entre el factor apropiado para la unidad objetivo. Las siete unidades se muestran simultáneamente en la tabla de conversión.
  3. 3
    Búsqueda del token de Tailwind más cercano
    Tras convertir, la herramienta calcula el valor rem y recorre dos tablas de referencia codificadas: los trece tokens de tamaño de fuente de Tailwind (text-xs hasta text-9xl) y su escala de espaciado, encontrando la coincidencia más cercana por distancia absoluta. Un signo = significa que el valor es un token exacto; ≈ significa que es la aproximación más cercana.
  4. 4
    Reescritura de CSS en lote mediante expresión regular
    El panel de pegar CSS acepta texto CSS en bruto y aplica una sustitución por expresión regular: en modo px→rem coincide con cada token px y sustituye la parte numérica por valor/tamañoFuenteBasePx + rem; en modo rem→px hace lo inverso. Se muestra el recuento de sustituciones para que puedas verificar cuántos valores se reescribieron.

Herramientas relacionadas

📏

Conversor de unidades

Convierte entre unidades de longitud, peso, temperatura, área, volumen y más.

Probar
📐

Generador de clamp() para CSS

Genere un valor clamp() de CSS fluido para tipografía y espaciado adaptables. Establezca el tamaño mínimo/máximo y el rango de la ventana gráfica, vea una vista previa en vivo y copie el CSS de una sola línea.

Probar
🟦

Generador de CSS Grid

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Probar

Preguntas frecuentes