Las unidades son el sistema de medición de la web. Abandonar los píxeles fijos en favor de unidades relativas es el paso más importante para construir interfaces modernas, accesibles y fluidas que se adapten a cualquier dispositivo móvil.
1¿Por qué usar unidades relativas (rem, em) en CSS?
Los píxeles (px) son absolutos e ignoran las configuraciones de accesibilidad del usuario. Las unidades relativas resuelven esto:
- →rem (Root em): Es la unidad más segura para tipografía. Al basarse siempre en la raíz (
<html>, comúnmente 16px), previene errores de escala. - →em: Es sensible al contexto padre. Si pones
padding: 1emen un botón, crecerá proporcionalmente si el tamaño de fuente de ese botón cambia. Ideal para componentes modulares aislados, pero peligroso si se anida en exceso.
2¿Cómo funcionan las unidades de Viewport (vw, vh) y calc()?
Requisitos del Entorno: El diseño web moderno requiere CSS3. En entornos donde predomina el uso de smartphones (como España y LATAM), dominar el viewport es crítico.
- →vw & vh: Representan el 1% del ancho y alto de la ventana física del navegador.
100vhgarantiza que un banner ocupe exactamente toda la pantalla del móvil, independientemente de la resolución. - →calc(): Una superpotencia en CSS. Permite mezclar unidades. Por ejemplo,
calc(100% - 50px)indica al navegador que reste píxeles fijos de un porcentaje dinámico, resolviendo layouts que antes requerían JavaScript pesado.
