En este artículo
¿Qué son las unidades CSS?
Las unidades CSS definen el tamaño de los elementos de una página web. Se dividen en dos categorías: las unidades absolutas (px, cm, mm, in, pt, pc), que tienen tamaños físicos fijos, y las unidades relativas (rem, em, vw, vh, vmin, vmax, %), que se escalan según el contexto, como el tamaño de fuente o las dimensiones del viewport.
El diseño responsive moderno depende en gran medida de las unidades relativas. La unidad rem se escala con el tamaño de fuente raíz (normalmente 16px), em se escala con el tamaño de fuente del elemento padre y las unidades de viewport (vw, vh) se escalan con la ventana del navegador, lo que hace que los diseños sean fluidos en todos los dispositivos.
Cómo funciona la conversión de unidades CSS
Convertir entre unidades CSS requiere conocer el contexto base: el tamaño de fuente raíz para rem, el tamaño de fuente del padre para em y las dimensiones del viewport para vw/vh. La mayoría de las conversiones usan una simple multiplicación o división.
- px a rem — divide el valor en píxeles entre el tamaño de fuente raíz (16px de forma predeterminada), de modo que 24px = 1.5rem cuando la raíz es 16px
- rem a em — rem y em son iguales cuando el elemento hereda el tamaño de fuente raíz; en caso contrario, multiplica por la proporción entre el tamaño de fuente del padre y el de la raíz
- px a vw/vh — divide el valor en píxeles entre el ancho (o el alto) del viewport y multiplícalo por 100, de modo que 192px = 10vw en un viewport de 1920px de ancho
Pruébalo gratis — sin registro
Convertir unidades CSS →Cuándo usar la conversión de unidades CSS
Convertir entre unidades CSS es una tarea diaria en el desarrollo front-end moderno.
- Diseño responsive — convierte maquetas de píxeles fijos en diseños basados en rem o vw que se escalan con elegancia en distintos tamaños de pantalla, del móvil al escritorio
- Accesibilidad — usar unidades rem garantiza que el texto se escale correctamente cuando los usuarios ajustan el tamaño de fuente predeterminado de su navegador, un requisito de accesibilidad fundamental
- Tokens de sistemas de diseño — convierte las especificaciones del diseñador (normalmente en píxeles) en tokens basados en rem que mantienen ratios coherentes de espaciado y tipografía
Preguntas frecuentes
¿Debería usar rem o em para los tamaños de fuente?
Usa rem en la mayoría de los casos. Las unidades rem son relativas al tamaño de fuente raíz, lo que las hace predecibles independientemente de la profundidad de anidamiento. Las unidades em se acumulan al anidarse (un 1.2em dentro de otro 1.2em se convierte en 1.44x), lo que puede provocar tamaños inesperados. Reserva em para componentes concretos en los que el escalado relativo al padre sea intencionado.
¿Cuál es el tamaño de fuente raíz predeterminado en los navegadores?
Todos los navegadores principales usan 16px como tamaño de fuente raíz predeterminado. Esto significa que 1rem = 16px salvo que se sobrescriba con CSS. Los usuarios pueden cambiarlo en la configuración del navegador por accesibilidad, por eso es importante usar rem en lugar de px para los tamaños de fuente y el espaciado en un diseño accesible.
¿Cuándo debería usar unidades de viewport en lugar de rem?
Usa unidades de viewport (vw, vh) para los elementos que deban escalarse con la ventana del navegador en lugar de con el tamaño de fuente. Algunos ejemplos habituales son las secciones hero a pantalla completa (height: 100vh), la tipografía fluida (clamp con vw) y el relleno responsive en los contenedores. Evita vw para el texto del cuerpo: ignora las preferencias de fuente del usuario.