Cuando das dimensiones a contenedores y textos en CSS, la unidad que elijas define qué tan flexible será tu diseño. Las unidades de medida en CSS van mucho más allá de los píxeles: existen porcentajes, rem, em, vw y vh, cada una con un comportamiento distinto frente al responsive design y la accesibilidad.

Esta guía recorre cuándo conviene usar cada unidad, cómo se calculan y por qué algunas son mejores que otras para fuentes, contenedores o secciones que ocupan toda la pantalla.

¿Por qué los píxeles no siempre son la mejor opción?

Los píxeles son una unidad fija. Si declaras un contenedor con width: 200px, ese ancho se mantendrá sin importar el tamaño de la pantalla.

Eso puede ser útil cuando necesitas precisión absoluta, pero juega en contra cuando buscas un diseño que se adapte a tablets o móviles. Si el viewport es más pequeño que tu contenedor, el navegador te obliga a hacer scroll horizontal, algo que rompe la experiencia.

¿Cuándo usar píxeles en CSS? Úsalos para bordes, sombras o detalles donde necesitas un valor exacto que no debe escalar, como un border: 2px solid black [01:30].

Los píxeles no están prohibidos, pero si vas a definir el ancho de un contenedor principal, conviene mirar otras opciones.

¿Cómo funcionan los porcentajes y cuándo conviene usarlos?

Los porcentajes calculan su valor a partir del contenedor padre. Un width: 50% significa que ese elemento ocupará la mitad del ancho de su padre, sea cual sea ese ancho [03:30].

Esto convierte al contenedor en algo flexible: cambia con la pantalla siempre que el padre también lo haga. La condición es clara: el contenedor padre debe tener dimensiones definidas para que el porcentaje tenga una referencia sobre la cual calcular.

Los porcentajes son ideales para layouts donde quieres proporciones relativas, como una columna que ocupe la mitad del contenido principal.

¿Cuál es la diferencia entre rem y em en CSS?

Aquí está una de las decisiones más importantes que tomarás al escribir CSS. Ambas unidades dependen del font-size, pero se comportan de formas muy distintas.

¿Qué es un rem y por qué es la unidad recomendada?

Un rem equivale al font-size del documento HTML raíz. Por defecto, los navegadores asignan 16 píxeles al HTML, así que 1 rem = 16 píxeles [05:20].

A partir de ahí calculas: 15rem equivale a 240 píxeles. Y lo mejor es que ese valor no cambia aunque modifiques el font-size de contenedores internos. Siempre toma como referencia el HTML base.

¿Por qué rem mejora la accesibilidad? Si un usuario aumenta el tamaño de fuente de su sistema operativo por problemas visuales, los elementos definidos en rem escalan automáticamente. Píxeles, porcentajes y em no responden a esa configuración.

¿Cómo se comporta em y por qué puede ser problemático?

Un em también parte de 16 píxeles cuando no hay un font-size definido en el contenedor padre. Pero si ese padre declara font-size: 20px, entonces 1 em pasa a valer 20 píxeles [07:40].

El problema es que em es acumulativo. Si tienes un contenedor con font-size: 20px y dentro otro con font-size: 24px, los hijos del segundo calcularán em a partir de 24, no de 20. Y si usas 1.2em, terminas con valores como 28 píxeles que se vuelven difíciles de predecir.

Eso pierde control sobre las medidas y complica mantener proporciones exactas. Por eso, para contenedores y tipografía, rem suele ser la apuesta segura.

¿Cómo usar vw y vh para diseños que ocupen toda la pantalla?

Las unidades view width (vw) y view height (vh) son relativamente nuevas y resuelven un problema histórico de CSS: medir con precisión el ancho y alto del viewport.

• 30vw significa el 30% del ancho de la pantalla.
• 20vh significa el 20% del alto de la pantalla.
• 100vw y 100vh cubren toda la pantalla.

A diferencia de los porcentajes, estas unidades no dependen del contenedor padre, sino directamente del viewport. Eso las hace perfectas para secciones tipo hero que deben ocupar toda la altura visible al cargar la página [10:50].

¿Cómo hago que un hero ocupe toda la pantalla? Aplica width: 100vw y height: 100vh al contenedor. Con esas dos líneas, el bloque se ajusta al 100% del ancho y alto del viewport, sin cálculos extra.

Antes de vh, lograr que un contenedor tomara una proporción exacta del alto de la pantalla requería hacks y cálculos en JavaScript. Hoy, una sola declaración resuelve el problema.

¿Qué unidad debo elegir según el caso de uso?

No existe una unidad universal; cada una brilla en un escenario distinto. Esta es una guía rápida para decidir:

• Píxeles: bordes, sombras y detalles que no deben escalar.
• Porcentajes: contenedores que dependen de las dimensiones del padre.
• rem: tipografía y dimensiones de contenedores que necesitan consistencia y accesibilidad.
• em: ajustes locales muy específicos, sabiendo que se acumulan.
• vw y vh: secciones que deben adaptarse al viewport, como heroes o modals a pantalla completa.

Mezclar estas unidades con criterio es lo que diferencia un layout rígido de uno verdaderamente adaptable. ¿Qué unidad usas más en tus proyectos y por qué? Cuéntame en los comentarios.