Cómo usar: Convertidor PX a REM
- Define el tamaño de fuente raíz (deja 16 salvo que tu sitio cambie el tamaño de fuente de
html). - Escribe un valor en Píxeles, REM o EM: los otros campos se actualizan al instante.
- Usa la tabla de tamaños comunes para copiar con un clic los valores rem más usados.
- Para convertir una hoja de estilos completa, pégala en Tu CSS, elige las opciones y copia el resultado.
¿Qué es un rem?
rem significa “root em”: 1rem equivale al tamaño de fuente del elemento raíz <html>. Los navegadores lo establecen por defecto en 16px, así que 1.5rem = 24px. La diferencia clave con los píxeles es que rem respeta la preferencia de tamaño de letra del usuario: quien configure su texto predeterminado en 20px verá el texto y los espaciados proporcionalmente más grandes, algo que un valor px fijo ignoraría.
La fórmula de conversión
rem = px ÷ tamaño de fuente raíz y px = rem × tamaño de fuente raíz. Con la raíz por defecto de 16px: 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 32px = 2rem. em usa las mismas operaciones, pero divide entre el tamaño de fuente del propio elemento (para font-size, el de su padre), así que los em se acumulan al anidarse.
| Unidad | Relativa a | Ideal para |
|---|---|---|
px | Nada: valor fijo | Bordes finos, sombras, detalles pequeños |
rem | Tamaño de fuente raíz (html) | Tamaños de fuente, espaciados, anchos de maquetación |
em | Tamaño de fuente del elemento actual | Padding que escala con el texto de un botón, tamaños de iconos, media queries |
Convertir un archivo CSS completo
El conversor de fragmentos localiza cada número seguido de px y lo divide entre tu base, omitiendo comentarios, cadenas entre comillas y rutas url(…) (así bg-16px.png no se altera). Los valores de 1px se mantienen por defecto, porque los bordes deben verse nítidos. Dentro de las media queries, rem y em siempre se calculan con el tamaño de fuente predeterminado del navegador (normalmente 16px), no con la regla de tu html: marca No modificar las @media queries si tu base es distinta.
El truco del 62.5% y por qué evitarlo
Definir html { font-size: 62.5%; } hace que 1rem = 10px para facilitar los cálculos, pero entonces cada componente necesita tamaños de fuente explícitos y los widgets de terceros se ven diminutos. Mantener el valor por defecto de 16px y usar un conversor como este es más sencillo y seguro.
rem en Webflow
Los desplegables de unidades de Webflow admiten rem y em, y puedes escribir 1.5rem directamente en un campo. Ten en cuenta que un tamaño de fuente definido en la etiqueta Body (All Pages) de Webflow afecta al texto heredado y a em, pero no a rem, que siempre se refiere al elemento html. Para valores que escalen con la pantalla, genéralos con la Calculadora de clamp().
También se busca como: px a rem, rem a px, convertir px a rem, px a em, calculadora rem, conversor de píxeles a rem, tamaño de fuente rem, unidades css.
Herramientas que combinan con: Convertidor PX a REM
- Convertidor de unidades — Convierte entre unidades métricas, imperiales y técnicas en diez categorías, con un conversor bidireccional y una tabla que muestra todas las unidades a la vez.
- Formateador de CSS — Convierte una hoja de estilos minificada en CSS legible, con una propiedad por línea y bloques @media correctamente anidados.
- Minificador CSS — Pega una hoja de estilos para reducirla al instante.
- Generador de Box Shadow — Apila varias capas de sombra, ajusta el desplazamiento, el desenfoque, la expansión y la opacidad sobre una tarjeta en vivo, y luego copia el CSS de box-shadow o text-shadow.
Preguntas frecuentes
¿Cuántos píxeles son 1rem?
html { font-size: 62.5% }, 1rem pasa a ser 10px; si el usuario aumenta el tamaño de letra de su navegador, 1rem crece en consecuencia.¿Cuál es la diferencia entre rem y em?
html, así que es predecible en todas partes. em es relativo al tamaño de fuente del elemento actual, por lo que los em anidados se multiplican: 1.2em dentro de otro 1.2em equivale a 1.44 veces el tamaño exterior.¿Debo usar rem o px para los tamaños de fuente?
¿Las media queries deben usar px, em o rem?
html.¿El conversor de fragmentos puede romper mi CSS?
px y omite comentarios, cadenas y valores url(). Revisa el resultado una vez, sobre todo valores como los bordes de 1px, que se mantienen por defecto.