Unidades: La Métrica de la Web

Más allá de los píxeles. Aprende a usar unidades relativas y dinámicas para interfaces verdaderamente fluidas.

📏 Absolutas (px)

Invariables. Úsalas solo para bordes o detalles que no deben escalar con el texto.

⚖️ Relativas (rem, em)

Basadas en la tipografía. REM es el estándar para espaciado y tamaño de fuente accesible.

📱 Viewport (vw, vh)

Basadas en el tamaño de la ventana. Ideales para layouts de pantalla completa.

Visualizador de Escalas

Comparativa de Ancho:

200px
50% (del padre)
30vw (ventana)

Nuevas Unidades dinámicas

Las unidades svh, lvh y dvh solucionan el problema de las barras de navegación en navegadores móviles (Safari/Chrome iOS).

height: 100dvh; /* Altura dinámica real */

💡 Pro Tip

Usa siempre rem para fuentes. Esto permite que los usuarios con problemas de visión escalen tu web correctamente desde los ajustes de su sistema.

Unidades Lab