Conversor de Unidades CSS
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
Hecho por
Miguel Ángel Colorado Marin
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 aparece al pasar el ratón por encima del campo.
Preguntas frecuentes
¿Cuánto es 1rem en pixels?
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.
¿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 pixels?
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.
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>