Introducción al diseño responsivo - Ayuda de Webflow
Aprende cómo el reflujo de contenido, el tamaño fijo, el tamaño relativo y los puntos de quiebre (consultas de medios) ayudan a crear diseños responsivos.
Cuando visitas un sitio en tu dispositivo móvil, puedes ver una versión de escritorio comprimida en una pantalla más pequeña, obligándote a hacer zoom y desplazarte para ver el contenido. También puedes encontrar una versión móvil reducida que carece del contenido y la experiencia que hacen superior a la versión de escritorio. Sin embargo, lo ideal es ver un sitio web responsivo, un diseño que reorganiza y reposiciona el contenido según el ancho del navegador.
Hay tres aspectos diferentes del diseño responsivo que cubriremos aquí:
- Reflujo de contenido
- Tamaño fijo
- Tamaño relativo
- Puntos de quiebre (consultas de medios)
Reflujo de Contenido
El reflujo de contenido se refiere al contenido que ajusta su ancho según el ancho de la ventana del navegador. Por ejemplo, un párrafo con configuraciones predeterminadas envolverá automáticamente su contenido a medida que el ancho del navegador se reduzca. Este comportamiento puede emularse arrastrando el borde del lienzo del Diseñador.
Tamaño Fijo
Tamaño Relativo
Esto se refiere a establecer el tamaño de un elemento en relación con otras cosas, como el ancho del navegador o un elemento padre. Por ejemplo, en lugar de usar un tamaño basado en píxeles para una imagen, considera usar diferentes unidades como %, VW (ancho del viewport) o VH (alto del viewport). Si usas % en una imagen y ajustas el ancho del navegador, verás que se adaptará en consecuencia, mientras que una imagen basada en px no lo hará.
Puntos de quiebre
Los diseños suelen ser mucho más complejos que simplemente gestionar el ancho de una imagen. Usar puntos de quiebre (también conocidos como consultas de medios) te permite no solo probar el reflujo del contenido, sino también modificar el diseño y la disposición según diferentes rangos de ancho de dispositivo.
Aprende más: