Convertidor de píxeles a REM
Convierte entre px y rem/em. Establece tu tamaño de fuente raíz y obtén una tabla de conversión instantánea para todos los tamaños comunes.
px
Convert
px
rem
Conversion Table (root = 16px)
| px | rem | em | pt | |
|---|---|---|---|---|
| 4 | 0.25rem | 0.25em | 3pt | |
| 8 | 0.5rem | 0.5em | 6pt | |
| 10 | 0.625rem | 0.625em | 7.5pt | |
| 12 | 0.75rem | 0.75em | 9pt | |
| 14 | 0.875rem | 0.875em | 10.5pt | |
| 16 | 1rem | 1em | 12pt | |
| 18 | 1.125rem | 1.125em | 13.5pt | |
| 20 | 1.25rem | 1.25em | 15pt | |
| 24 | 1.5rem | 1.5em | 18pt | |
| 28 | 1.75rem | 1.75em | 21pt | |
| 32 | 2rem | 2em | 24pt | |
| 36 | 2.25rem | 2.25em | 27pt | |
| 40 | 2.5rem | 2.5em | 30pt | |
| 48 | 3rem | 3em | 36pt | |
| 56 | 3.5rem | 3.5em | 42pt | |
| 64 | 4rem | 4em | 48pt | |
| 72 | 4.5rem | 4.5em | 54pt | |
| 80 | 5rem | 5em | 60pt | |
| 96 | 6rem | 6em | 72pt | |
| 112 | 7rem | 7em | 84pt | |
| 128 | 8rem | 8em | 96pt |
Cómo usar Convertidor de píxeles a REM
- 1Establece tu tamaño de fuente raíz (por defecto 16px).
- 2Ingresa un valor en píxeles para convertir a rem/em.
- 3Ve la tabla de conversión completa para tamaños comunes.
- 4Copia cualquier valor directamente de la tabla.
ZenovayAnalytics
Analytics pensado para fundadores.
- Seguimiento de visitantes en tiempo real
- Privacidad primero, sin aviso de cookies
- Configurado en dos minutos
Herramientas relacionadas
Formateador y Validador JSON
Formatea, valida y embellece datos JSON con resaltado de sintaxis y detección de errores.Decodificador JWT
Decodifica e inspecciona tokens JWT. Consulta el encabezado, la carga útil y verifica firmas.Base64 Codificar/Decodificar
Codifica texto a Base64 o decodifica Base64 a texto. Soporta UTF-8 y datos binarios.Codificador/Decodificador de URL
Codifica o decodifica componentes de URL. Maneja caracteres especiales, cadenas de consulta y URLs completas.Preguntas frecuentes
¿Cuál es la diferencia entre px, rem y em?▾
px (píxeles) es una unidad absoluta — 1 px siempre es 1 píxel independiente del dispositivo, independientemente del contexto. rem (root em) es relativo al tamaño de fuente del elemento raíz (<html>). Si la raíz es 16 px, entonces 1 rem = 16 px, 2 rem = 32 px. em es relativo al tamaño de fuente del elemento actual — si un div tiene font-size: 20 px, entonces 1 em = 20 px dentro de ese div. rem es preferido para el diseño porque es consistente; em es preferido para la tipografía dentro de componentes que necesitan escalar con su propio tamaño de fuente.
¿Por qué usar rem en lugar de px?▾
Las unidades rem respetan las preferencias de tamaño de fuente del navegador del usuario. Cuando un usuario aumenta el tamaño de fuente base de su navegador por accesibilidad, los diseños basados en rem se escalan proporcionalmente. Los diseños basados en px no lo hacen. Además, rem simplifica las matemáticas del sistema de diseño — si su escala de diseño se basa en incrementos de 4 px (0,25 rem) o 8 px (0,5 rem), los valores rem se traducen directamente. Tailwind CSS usa rem para todo el espaciado y la tipografía (text-lg = 1,125 rem = 18 px con raíz de 16 px por defecto).
¿Qué tamaño de fuente raíz debo usar?▾
El valor predeterminado del navegador es 16 px. La mayoría de los sistemas de diseño (Tailwind, Material UI, Bootstrap) se basan en 16 px. Si usa el 62,5% de tamaño de fuente raíz (base de 10 px — un truco común: html { font-size: 62.5% }), entonces 1 rem = 10 px, haciendo las matemáticas más simples (p. ej., 1,4 rem = 14 px). El truco del 62,5% tiene implicaciones de accesibilidad — anula la preferencia de tamaño de fuente del usuario para todos los cálculos rem.
¿Cómo convierto unidades de viewport (vw, vh)?▾
Las unidades de viewport (vw, vh, svh, dvh) son relativas al tamaño del viewport, no al tamaño de fuente. 1 vw = 1% del ancho del viewport. 1 vh = 1% del alto del viewport. Para convertir: valor en px = (valor vw / 100) × ancho del viewport. Dado que el tamaño del viewport varía, vw/vh no se puede expresar como un valor px fijo — este convertidor se centra en unidades relativas a la fuente (px, rem, em).
¿Qué es la función clamp() para tipografía fluida?▾
clamp(mínimo, preferido, máximo) crea un valor que escala entre un mínimo y un máximo. Para tipografía fluida: font-size: clamp(1rem, 2,5vw, 2rem) — la fuente escala con el ancho del viewport pero nunca menor de 16 px ni mayor de 32 px. Esto reemplaza múltiples puntos de interrupción para la tipografía. El valor "preferido" suele ser una expresión basada en vw: calc(1rem + 0,5vw) o similar.