Diseño Responsive

Unidades de Medida: La Matemática del Diseño Fluido

CSS ofrece una caja de herramientas métricas mucho más rica que los simples píxeles. En este módulo, desglosamos la tabla periódica de las unidades de medida, desde las relativas a la tipografía hasta las que reaccionan al tamaño de la pantalla, permitiéndote construir layouts a prueba de futuro.

En la web moderna, el tamaño no es fijo; es una relación entre elementos y el entorno de visualización.

Absolutas vs. Relativas: El cambio de mentalidad

Antes de profundizar, debemos distinguir dos mundos: 1. **Unidades Absolutas (px)**: Son fijas. Un píxel es un punto en la pantalla. Son estables y precisas, pero no escalan si el usuario cambia sus preferencias o el dispositivo varía. 2. **Unidades Relativas**: Su valor depende de otra cosa (del padre, de la raíz o de la pantalla). Son la base del diseño responsive (RWD).

Gráfico de balanza comparando la rigidez del PX contra la flexibilidad del REM — Mientras el PX es como construir con cemento, las unidades relativas son como construir con materiales elásticos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

html {
  font-size: 16px; /* Base */
}

.tarjeta {
  /* 2 * 16px = 32px */
  padding: 2rem;
  
  /* 1.5 * 16px = 24px */
  font-size: 1.5rem; 
}

html {
  font-size: 16px; /* Base */
}

.tarjeta {
  /* 2 * 16px = 32px */
  padding: 2rem;
  
  /* 1.5 * 16px = 24px */
  font-size: 1.5rem; 
}

Diagrama mostrando la relación directa entre la etiqueta HTML y los elementos hijos usando REM — Al usar REM, centralizas el control del escalado en un solo lugar: la etiqueta HTML.

El Contexto Importa: EM

**EM** es similar a REM, pero su referencia es el **padre directo** (o el propio elemento si es font-size). Es útil para componentes modulares donde quieres que el padding o los márgenes sean proporcionales al tamaño del texto de ese componente específico. ⚠️ **Cuidado**: Los `em` se multiplican en cascada (interés compuesto), lo que puede generar tamaños gigantes inesperados si anidas muchos elementos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.padre {
  font-size: 20px;
}

.hijo {
  /* 2em = 2 * 20px = 40px */
  font-size: 2em; 
  
  /* 0.5em = 0.5 * 40px (su propio font-size) = 20px */
  padding: 0.5em;
}

.padre {
  font-size: 20px;
}

.hijo {
  /* 2em = 2 * 20px = 40px */
  font-size: 2em; 
  
  /* 0.5em = 0.5 * 40px (su propio font-size) = 20px */
  padding: 0.5em;
}

Ancho y Alto del Visor: VW y VH

Estas unidades responden al tamaño de la ventana del navegador (Viewport). * **vw (Viewport Width)**: 1vw = 1% del ancho de la pantalla. * **vh (Viewport Height)**: 1vh = 1% del alto de la pantalla. Son ideales para secciones de 'héroe' (portadas) que deben ocupar toda la pantalla inicial (`height: 100vh`) o tipografías gigantes que escalan con el ancho del monitor.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.portada-full-screen {
  width: 100vw;  /* Todo el ancho */
  height: 100vh; /* Todo el alto visible */
  display: flex;
  justify-content: center;
  align-items: center;
}

.portada-full-screen {
  width: 100vw;  /* Todo el ancho */
  height: 100vh; /* Todo el alto visible */
  display: flex;
  justify-content: center;
  align-items: center;
}

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

.cuadrado-perfecto {
  /* Será el 50% del ancho en móviles */
  /* O el 50% del alto en monitores panorámicos */
  width: 50vmin;
  height: 50vmin;
  background: tomato;
}

.cuadrado-perfecto {
  /* Será el 50% del ancho en móviles */
  /* O el 50% del alto en monitores panorámicos */
  width: 50vmin;
  height: 50vmin;
  background: tomato;
}

Ilustración de cómo vmin selecciona la dimensión limitante en orientación vertical vs horizontal — VMIN garantiza que el elemento siempre sea visible completamente, adaptándose al eje más restrictivo.

Unidades de Nicho: CH y EX

Existen unidades diseñadas específicamente para la lectura óptima: * **ch**: Equivale al ancho del carácter '0' (cero) de la fuente actual. Es perfecta para limitar el ancho de párrafos (`max-width: 65ch`) para que las líneas no sean eternas y cansen la vista. * **ex**: Relativa a la altura de la letra 'x' minúscula. Se usa raramente, principalmente en ajustes tipográficos muy finos.

Copiar con comentariosCopiado

Copiar sin comentariosCopiado

p {
  /* Regla de oro de legibilidad: */
  /* Máximo 60-70 caracteres por línea */
  max-width: 60ch;
  margin: 0 auto;
}

p {
  /* Regla de oro de legibilidad: */
  /* Máximo 60-70 caracteres por línea */
  max-width: 60ch;
  margin: 0 auto;
}

Porcentajes (%): La Relatividad al Padre

El porcentaje es la unidad fluida original. A diferencia de `vw` (que mira la pantalla), el `%` mira al **contenedor padre directo**. Si un `div` mide 500px y su hijo tiene `width: 50%`, el hijo medirá 250px. Es la base de las grillas y layouts flexibles antes de la llegada de Flexbox y Grid.

Esquema de cajas anidadas mostrando cómo el porcentaje se calcula sobre el contenedor inmediato — El porcentaje requiere que el padre tenga un tamaño definido para funcionar correctamente, especialmente en alturas.

¿Cuándo debo usar px?

Usa `px` cuando necesites medidas exactas que no deban escalar, como bordes finos (`border: 1px solid`), sombras o ajustes de alineación muy precisos que no afecten la accesibilidad del texto.

¿Por qué 100vw a veces causa scroll horizontal?

Porque en algunos sistemas operativos (como Windows), la barra de scroll vertical ocupa espacio físico en la pantalla. `100vw` ignora esa barra y toma el ancho total, quedando un poco más ancho que el área visible real. A menudo `width: 100%` es más seguro.

¿Cuál es la diferencia real entre usar % y vw para el ancho?

`%` es relativo al elemento padre (que podría ser pequeño), mientras que `vw` siempre es relativo al navegador completo. Si tienes un botón dentro de una tarjeta pequeña, `50%` será la mitad de la tarjeta, `50vw` será la mitad de la pantalla.

¿Puedo mezclar unidades?

¡Sí, y debes hacerlo! Es común ver `font-size: 1rem` (accesibilidad), `border: 1px solid` (precisión), `width: 100%` (layout) y `margin-bottom: 2em` (ritmo vertical) en el mismo elemento.

¿Qué pasa si cambio la fuente base del navegador?

Si usaste `px` para tus textos, nada cambiará (malo para el usuario con problemas de visión). Si usaste `rem`, todo tu diseño se recalculará y ampliará automáticamente para adaptarse a la necesidad visual del usuario (excelente práctica).