Conversor de unidades CSS (px / rem / em / vh / vw)

Por qué usar rem en lugar de px

Los navegadores parten de 16px, pero las personas con baja visión suelen aumentar el tamaño de fuente predeterminado en la configuración del navegador. El texto medido en rem crece con ese ajuste; el medido en px no. El zoom de página aumenta ambos, pero el ajuste del tamaño de fuente es el que muchas personas necesitan, y el criterio de WCAG sobre el redimensionamiento del texto espera que este escale hasta 200% sin pérdida de contenido o funcionalidad. Define el tamaño del texto y el espacio que lo rodea en rem, y reserva px para líneas muy finas y bordes.

La columna em y la anidación

Un em es relativo al tamaño de fuente del propio elemento, que para font-size significa el del elemento padre. Los valores em de aquí suponen que el padre tiene el tamaño raíz, algo que solo se cumple en el nivel superior. Dentro de un elemento 0.875em, otro 0.875em da 12.25px en lugar de 14px, y la reducción se acumula. Por eso rem es la opción predeterminada más segura, mientras que em resulta adecuado para espacios que deben escalar con el texto de su componente.

La base de 62.5% y las unidades del viewport

Establecer html { font-size: 62.5% } hace que 1rem equivalga a 10px, lo que facilita los cálculos; introduce 10 como tamaño base para que coincida. Esto reduce todo lo demás que esté medido en rem, incluidos los componentes de terceros, así que vuelve a establecer un tamaño legible en body.

Las cifras de vw y vh suponen un viewport de 1440 × 900. En los teléfonos, 100vh puede ser más alto que el área visible mientras se muestra la barra del navegador; 100svh y 100dvh son las unidades que tienen esto en cuenta.

Cómo se usa

1. Introduce un valor en píxeles (px) y el tamaño base raíz (predeterminado 16px).
2. Consulta los valores calculados en rem, em, vw y vh.
3. Copia fragmentos CSS listos para usar o consulta la tabla de escalas.

Privacidad y límites

Se ejecuta al instante en JavaScript del lado del cliente.