Conversor de Unidades CSS
Este conversor de unidades CSS online convierte entre px, rem, em, vw, vh, pt y más en tiempo real. Base font-size configurable. Sin registro.
Edita cualquier campo — todos se convierten en tiempo real
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
¿Cómo usar el conversor de unidades CSS?
- 1
Configura la base font-size y el viewport
Pulsa el botón «Configuración» para ajustar el tamaño de fuente base (por defecto 16px) y las dimensiones del viewport (por defecto 1440×900px). Estos valores afectan a las conversiones de rem, em, vw y vh respectivamente.
- 2
Introduce un valor en cualquier campo
Escribe el valor que quieres convertir en el campo de la unidad de origen. Puedes usar decimales. La conversión ocurre instantáneamente en todos los demás campos al mismo tiempo, sin necesidad de pulsar ningún botón.
- 3
Lee los valores en la tabla
Al introducir un valor, aparece una tabla de referencia con todos los valores en todas las unidades. Esta vista es especialmente útil para comparar y copiar el valor exacto en CSS (por ejemplo: «1.5rem» o «24px»).
- 4
Copia el valor CSS
Cada campo tiene un pequeño botón de copiar que copia el valor junto con la unidad (por ejemplo «1.5rem» o «16px»), listo para pegar directamente en tu CSS. El botón está a la derecha de cada campo: se activa cuando hay un valor y muestra un check verde durante 1.2 segundos después de copiar.
Preguntas frecuentes
¿Cuánto es 1rem en píxeles?
1rem equivale al tamaño de fuente del elemento raíz (html). Por defecto en todos los navegadores es 16px, por lo que 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px, etc. Puedes cambiar el tamaño base en la configuración si tu proyecto usa un valor diferente.
¿Cuál es la diferencia entre rem y em?
rem (root em) siempre es relativo al tamaño de fuente del elemento raíz (html), independientemente del contexto. em es relativo al tamaño de fuente del elemento padre. Esto hace que rem sea más predecible y fácil de usar en diseño responsivo, ya que su valor no cambia según la jerarquía del DOM. Este conversor usa la misma base para em y rem, así que no tiene en cuenta el tamaño de fuente del padre.
¿Cuándo usar vw y vh?
vw (viewport width) y vh (viewport height) son unidades relativas al tamaño del viewport. 1vw = 1% del ancho del viewport, 1vh = 1% del alto. Son perfectas para elementos que deben adaptarse al tamaño de la pantalla, como headers de pantalla completa, texto responsivo (usando clamp()) o layouts sin scroll.
¿Cuánto es 1pt en píxeles?
1pt (punto tipográfico) = 1/72 de pulgada. Dado que CSS usa 96 DPI como referencia, 1pt = 96/72 ≈ 1.333px. Los puntos se usan principalmente para impresión (@media print) y en documentos con estilos tipográficos heredados de sistemas de diseño editorial.
¿Por qué rem es mejor que px para accesibilidad?
Usar rem en lugar de px respeta la configuración de tamaño de fuente del usuario en el navegador. Si un usuario aumenta el tamaño de fuente predeterminado (por ejemplo, a 20px por problemas de visión), los elementos con rem se escalan proporcionalmente, mientras que los definidos en px permanecen fijos y pueden resultar ilegibles.
Equivalencias con la configuración por defecto
Con base de 16px y viewport de 1440×900px, estas son las equivalencias que devuelve la herramienta:
- 1rem = 16px = 12pt = 1pc = 0.423333cm = 4.23333mm = 1.11111vw = 1.77778vh
- 24px = 1.5rem = 18pt = 0.635cm = 1.66667vw = 2.66667vh
- 1px = 0.0625rem = 0.75pt = 0.264583mm
- 1pt = 1.33333px = 0.0833333rem
- 1cm = 37.7953px = 2.36221rem = 28.3465pt
- 1vw = 14.4px = 0.9rem
- 1vh = 9px = 0.5625rem
Si cambias la base a 20px, 1.5rem pasa a valer 30px y 2.08333vw con ese viewport. Por eso el resultado de rem solo sirve si la base coincide con el font-size raíz real de tu proyecto, que puede no ser 16px. Los valores se calculan con la misma función de conversión que usa la herramienta. Para saber qué base usa tu proyecto, abre las herramientas de desarrollador del navegador y mira el font-size calculado del elemento html: ese valor es el que usa rem.
Qué no hace el conversor
Es un conversor aritmético con valores fijos. Antes de copiar un resultado, ten en cuenta estos límites:
- em usa la misma base que rem. No conoce el font-size del padre: con base de 16px, 2em da 32px, igual que 2rem, aunque el padre tenga otro tamaño.
- vw y vh se calculan con el viewport que escribes en Configuración (1440×900 por defecto), no con la ventana de tu navegador.
- Las unidades físicas (cm, mm, pt, pc) usan 96 píxeles por pulgada, la referencia de CSS. No tienen en cuenta el zoom del navegador ni la densidad de la pantalla.
- Los resultados se redondean a seis cifras significativas. Los valores menores de 0.0001 salen en notación exponencial: 0.00001px aparece como 1.000e-5px, algo que no vas a necesitar en CSS.
- Cambiar la base o el viewport recalcula toda la tabla a partir del último valor que escribiste.
- Los campos calculados se copian ya redondeados; el campo que escribiste se copia tal cual. Antes de pegar en CSS, comprueba que el número tenga sentido en la unidad de destino.
- Las proporciones de em no se calculan solas: multiplica tú los valores. Por ejemplo, 1.25em dentro de un padre de 1.5rem equivale a 1.875rem. El porcentaje (%) tampoco está entre las unidades soportadas.
- Para unidades generales (litros, kilos, metros) usa el conversor de unidades.
Herramientas relacionadas
Incrusta el conversor en tu web
Integra este conversor de unidades CSS en cualquier página web con un simple iframe:
<iframe
src="https://miguelacm.es/embed/css-unit-converter"
width="100%"
height="600"
frameborder="0"
title="CSS Unit Converter"
></iframe>