Responsive Patterns

Los breakpoints no deben basarse en tamaños de pantalla populares (768px, 1024px) sino en el punto donde el contenido empieza a romperse o apretarse. Diseñar con un ancho variable y anadir un breakpoint cuando el layout "duele". Si a 600px el layout se rompe y no hay breakpoint porque el siguiente es 768px (iPad), el usuario ve contenido apretado o desbordado sin razón.

clamp(min, preferido, max) escala suavemente entre dos valores sin breakpoints. Para tipografía: font-size: clamp(1rem, 0.5rem + 2vw, 1.75rem). Para espaciado: padding: clamp(16px, 5vw, 48px). Elimina la necesidad de redefinir valores en cada breakpoint y produce una transición continua en lugar de saltos abruptos al cruzar cada media query.

Un componente colocado en un sidebar de 280px debe verse diferente al mismo componente en el área principal de 800px. Con container-type: inline-size, el componente responde a su contenedor, no al viewport. Es la diferencia entre "responsivo al viewport" y verdaderamente portable.

Escribir los estilos base para pantallas pequeñas y añadir complejidad con min-width. El CSS base es el más simple (una columna, sin layout especial) y los min-width añaden columnas, sidebars y elementos secundarios. Invertir este orden (desktop-first con max-width) genera especificidad innecesaria.

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) crea un grid que ajusta el número de columnas automáticamente sin media queries. Cada celda tiene un mínimo (280px) y crece con 1fr para llenar el espacio sobrante. Cuando el contenedor se estrecha, las celdas saltan a la fila siguiente solas. Es la solución canonica para galerias, listas de productos y dashboards que deben funcionar en cualquier viewport sin breakpoints manuales.

En mobile, las tablas con muchas columnas se deforman. Estrategias: ocultar columnas secundarias con display:none en mobile, colapsar filas a cards, o marcar columnas con data-priority y ocultar las de baja prioridad progresivamente. La columna de identificación y la de acción deben ser siempre visibles.

srcset sirve al browser la imagen del tamaño correcto para el viewport y la densidad de pantalla. sizes describe el espacio que ocupara la imagen en el layout. Art direction con <picture> y media permite servir composiciones distintas (crop diferente) según el breakpoint.

Hamburger: para apps con muchas secciones secundarias o flujos tipo documento. Bottom nav: para 3-5 destinos principales con alta frecuencia de uso (apps). Tabs horizontales: para contenido categorizado con pocas opciones (2-4). El patrón equivocado aumenta friction y abandono. Ocultar toda la navegación detras de un hamburger reduce la descubribilidad en un 21% según Nielsen Norman Group. La combinación ideal en apps móviles es bottom nav para los 3-5 destinos principales (siempre visibles) + hamburger para items secundarios y configuración.