Unidades de medida

Elegir la unidad correcta en CSS es clave para lograr un diseño responsive, accesible y controlado. Aquí se explica, con ejemplos claros, cuándo usar px, %, rem, em, vw y vh, sus ventajas y sus límites en contenedores y texto. Además, verás por qué rem mejora la accesibilidad y cómo vw/vh simplifican ocupar toda la pantalla.

¿Por qué los pixels pueden limitar el diseño responsive?

Los pixels son una unidad fija: si defines un contenedor de 200px, se mantendrá así sin importar el tamaño de pantalla. Esto puede obligar a hacer scroll si el contenido es más ancho que el viewport. Es útil en casos puntuales, pero no siempre para definir el width de contenedores.

• Los pixels no se adaptan al tamaño de pantalla.
• Si el viewport es menor, aparece scroll.
• Siguen siendo válidos según el caso de uso.

Ejemplo:

.box-pixel {
  border: 1px solid red;
  padding: 16px;
  width: 200px;
}

Tip práctico: con el inspector de elementos verás cómo todo cambia salvo el primer bloque fijo en 200px cuando reduces la pantalla.

¿Cómo usar porcentajes para contenedores flexibles?

El porcentaje se calcula con base en el contenedor padre. Si ese padre tiene dimensiones, tu caja puede adaptarse. Por ejemplo, 50% tomará la mitad del ancho disponible del padre, y se mantendrá proporcional al redimensionar la ventana.

• Depende del tamaño del contenedor padre.
• Permite contenedores flexibles y relativos.
• Requiere que el padre tenga dimensiones definidas.

Ejemplo:

.box-percent {
  border: 1px solid red;
  padding: 16px;
  width: 50%;
}

¿Qué diferencias hay entre rem, em, vw y vh?

Estas unidades relativas resuelven necesidades distintas. rem y em se basan en el font-size; vw y vh usan el tamaño del viewport. Elegir bien evita comportamientos inesperados y mejora la accesibilidad.

¿Qué es rem y por qué mejora accesibilidad?

Un rem equivale siempre al font-size del documento base (HTML), que por defecto es 16 píxeles. No cambia aunque alters el font-size de contenedores internos. Es ideal para texto y también útil para dimensiones consistentes.

• 1rem = 16px por defecto en HTML.
• No se ve afectado por font-size de contenedores internos.
• Mejora la accesibilidad: si el usuario cambia el tamaño de fuente del dispositivo, el contenido en rem se ajusta.

Ejemplo:

.box-rem {
  border: 1px solid red;
  padding: 16px;
  width: 15rem; /* 15 x 16px = 240px por defecto */
}

¿Qué es em y por qué puede acumularse?

Un em toma como referencia el font-size del contenedor padre inmediato. Si no hay uno definido, hereda el de HTML (16px). El problema: es acumulativo. Cambiar font-size en distintos niveles altera el valor efectivo de 1em, y puede dificultar llegar a valores exactos.

• 1em = font-size del padre.
• Si el padre es 20px: 1em = 20px.
• Con anidaciones, los cálculos se acumulan y pueden redondearse.

Ejemplo con acumulación:

.container {
  font-size: 20px; /* aquí 1em = 20px */
}
.container .inner {
  font-size: 24px; /* cambia la base dentro de .inner */
}
.box-em {
  border: 1px solid red;
  padding: 16px;
  width: 1em; /* vale 16px, 20px o más, según el padre */
}

Consecuencia: para medidas de contenedor, rem suele ser más predecible que em.

¿Qué son vw y vh y cómo ocupan pantalla?

vw (view width) y vh (view height) miden en función del viewport: 1vw es 1% del ancho de la pantalla; 1vh es 1% de la altura. Son precisos para ajustar bloques a la pantalla y facilitan patrones comunes como secciones a pantalla completa.

• 30vw: ocupa el 30% del ancho del viewport.
• 20vh: ocupa el 20% de la altura del viewport.
• Útiles para resolver alturas relativas antes complejas en CSS.

Ejemplos:

.box-vw {
  border: 1px solid red;
  padding: 16px;
  width: 30vw;
}

.box-vh {
  border: 1px solid red;
  padding: 16px;
  height: 20vh;
}

/* Sección tipo *hero* a pantalla completa */
.hero {
  width: 100vw;
  height: 100vh;
}

Habilidades que practicas aquí: - Definir dimensiones con px, %, rem, em, vw y vh según el objetivo. - Usar el inspector para verificar comportamientos en diferentes tamaños de pantalla. - Priorizar rem para tipografías y medidas previsibles; evitar acumulación indeseada de em. - Aplicar vw/vh para bloques adaptados al viewport, como un hero a pantalla completa.

¿Con cuál unidad te sientes más cómodo y por qué? Comenta cómo la aplicas en tus layouts y qué retos has resuelto.