# Estrategias de Escalado Responsivo: UI Líquida > Aprenda a elegir y aplicar diferentes estrategias de escalado responsivo para que sus componentes y layouts se adapten con fluidez a cualquier tamaño de pantalla. *Tags: ux, tecnica, diseño-ui, product-design, desarrollo* --- > [!info] Definición Rápida > Las **Estrategias de Escalado Responsivo** definen cómo se comportan los elementos de una interfaz cuando el espacio disponible cambia. No es solo redimensionar cajas, sino decidir qué elementos crecen, cuáles se apilan, cuáles desaparecen y cuáles mantienen su tamaño original para garantizar la usabilidad en cualquier dispositivo. ## El Reto de las Pantallas Infinitas Hoy en día, diseñamos para un reloj inteligente (Apple Watch) de 30mm y para un monitor curvo de 49 pulgadas. No podemos diseñar una pantalla para cada ancho. Necesitamos una **Estrategia de Escalado** que sea líquida y resiliente. Existen tres enfoques principales para gestionar el escalado de una interfaz: ## 1. El Escalado Adaptativo (Fixed Breakpoints) El diseño cambia por "saltos" en puntos específicos (breakpoints). - **Cómo funciona:** Tienes un diseño para móvil (375px), uno para tablet (768px) y uno para desktop (1440px). Entre esos puntos, el diseño suele estar centrado con márgenes fijos. - **Ventaja:** Mucho control visual para el diseñador. - **Contra:** Sensación de "saltos" bruscos al redimensionar y mucho espacio en blanco "muerto" en pantallas intermedias. ## 2. El Escalado Líquido (Fluid Scaling) Los elementos se estiran y encogen de forma porcentual o siguiendo reglas de [Intrinsic Sizing](/conceptos/intrinsic-sizing/). - **Cómo funciona:** Usas unidades relativas (%, rem, vw/vh) en lugar de píxeles fijos. El diseño se adapta de forma suave y continua a cada píxel de ancho de la ventana. - **Ventaja:** Aprovecha al máximo todo el espacio de cualquier pantalla. - **Contra:** Si no se establecen límites (`max-width`), las líneas de texto pueden volverse demasiado largas e ilegibles en monitores grandes. ## 3. El Escalado por Reorganización (Reflow) Los elementos cambian su disposición física basándose en el espacio. - **Cómo funciona:** El menú lateral desaparece bajo un icono de hamburguesa, las tarjetas que estaban de 3 en 3 pasan a estar de 1 en 1, o los botones de una fila pasan a ser una columna (Stacking). - **Herramienta clave:** El "Wrap" de Auto Layout en Figma o Flexbox en CSS. ## Estrategias Específicas para Componentes ### A. Escalado de Tipografía Fluida (Fluid Type) Usa valores que cambien según el ancho de la pantalla (ej. `clamp()` en CSS) para que los títulos crezcan suavemente en monitores grandes y se reduzcan en móviles, asegurando siempre una buena jerarquía visual sin saltos bruscos. ### B. Proporcionalidad de Imágenes (Aspect Ratio) Asegúrate de que las imágenes mantengan su relación de aspecto (ej. 16:9) ignorando el ancho del contenedor. Usa la propiedad `object-fit: cover` para que la imagen siempre llene su espacio sin deformarse. ### C. Densidad de Información En pantallas grandes, no solo hagas las cosas más grandes. Aprovecha el espacio para mostrar más información útil o herramientas avanzadas que en móvil están ocultas (Progressive Disclosure). ## Cómo Diseñar para el Escalado en Figma No dupliques pantallas para cada cambio. Usa las capacidades de **Constraints** y **Auto Layout**: 1. Diseña un componente y estíralo/encógelo en Figma. 2. Observa qué elementos se rompen al llegar a un ancho determinado. 3. Establece reglas de `Fill Container` para que el componente "entienda" dónde debe crecer y dónde no. 4. Define los **Puntos de Quiebre** (Breakpoints) solo cuando la estructura necesite cambiar radicalmente (reflow). ## Consejos de Mentor - **Diseña el "Centro" de la Campana:** No te obsesiones con el móvil de 320px ni con el monitor 5K si el 80% de tus usuarios usan portátiles de 13 pulgadas. Prioriza el escalado para los tamaños más comunes de tu audiencia. - **La ley de la Legibilidad:** El ancho ideal de una línea de texto está entre 45 y 75 caracteres. Si tu diseño líquido hace que las líneas de texto sean más largas, añade un contenedor con `max-width` para frenar el escalado. - **Prueba el "Extreme Resizing":** Redimensiona la ventana de tu navegador de forma rápida de izquierda a derecha. Si ves elementos que se solapan o desaparecen, tu estrategia de escalado necesita un ajuste en los Gaps o el Reflow. ## Recursos y Herramientas - **Google Web Dev:** [Responsive Web Design Basics](https://web.dev/responsive-web-design-basics/) - **Every Layout:** [Algorithmic Layout Systems](https://every-layout.dev/) - **Figma Learn:** [Using Constraints and Auto Layout](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-layouts-with-auto-layout) - **Artículos:** [Responsible Responsive Design](https://alistapart.com/article/responsible-responsive-design/) --- [[intrinsic-sizing]] [[layout-grid-vs-intrinsic]] [[constraints-auto-layout]] [[breakpoint-vs-container-queries]] [[visual-vs-dom-hierarchy]] --- Source: https://www.fernandoux.com/es/wiki/tecnicas/estrategias-de-escalado-responsivo/