Mapa rápido de unidades
Qué usar y cuándo para evitar diseños rígidos.
Las unidades absolutas como px son predecibles, pero no escalan bien en pantallas y preferencias del usuario.
Las unidades relativas (rem, em, %, vw, vh, fr) se adaptan al contexto y hacen que el diseño respire mejor.
- px: útil para bordes y sombras, evita en tipografía.
- rem: escala global, base ideal para texto.
- em: escala local, perfecta para componentes.
- %: depende del contenedor, útil en anchos y paddings.
- vw/vh: relativo a la ventana, útil para hero y layouts.
- fr: unidad de Grid que representa una fracción del espacio disponible.
- ch: útil para inputs y monospace.
- min()/max()/clamp(): límites y tamaños fluidos.
