El diseño web responsivo es un enfoque moderno que garantiza que las páginas web se vean y funcionen bien en una amplia variedad de dispositivos y tamaños de pantalla, desde teléfonos móviles hasta monitores de escritorio. En este capítulo, aprenderás los conceptos básicos y técnicas de CSS para crear sitios web que se adapten a diferentes resoluciones de pantalla.

¿Qué es el diseño responsivo?

El diseño responsivo se basa en la idea de crear una sola página web que pueda adaptarse dinámicamente a diferentes tamaños de pantalla sin que el contenido se desborde o se vea mal. Esto mejora la accesibilidad y la experiencia del usuario, independientemente del dispositivo que esté utilizando.

Aquí se muestra una comparación visual de una página web en un dispositivo móvil, una tablet y una pantalla de escritorio, mostrando cómo se adapta el contenido

Uso de unidades flexibles

Para lograr un diseño responsivo, debemos evitar el uso de unidades fijas como píxeles, y optar por unidades flexibles que se ajusten a diferentes tamaños de pantalla.

Unidades relativas

Las unidades relativas como porcentajes (%), em, rem, y vw/vh permiten crear un diseño que se escala de manera proporcional a la pantalla del dispositivo.

1. Porcentajes (%): Se usan para definir anchos y márgenes relativos al tamaño del contenedor padre.

   css
   

   "En este ejemplo, el ancho del div será el 50 por ciento del tamaño de su contenedor padre, lo que permite que el tamaño se ajuste en diferentes pantallas."

2. Em y Rem: Se utilizan para establecer tamaños de texto, márgenes y rellenos basados en el tamaño de la fuente del contenedor (em) o del elemento raíz (rem).

   css
   

   "Aquí usamos rem para que el tamaño de la fuente del párrafo sea 1.2 veces el tamaño de la fuente raíz, lo que permite que el texto escale proporcionalmente."

3. Vista de ancho y alto (vw y vh): Estas unidades se basan en el tamaño de la ventana del navegador. 1vw es igual al 1% del ancho de la ventana, y 1vh es igual al 1% de la altura.

   css
   

   "Con esta regla, el alto de la sección ocupará el 100 por ciento de la altura visible del navegador."

Metaetiqueta viewport

Para garantizar que una página web sea completamente responsiva, es importante incluir la siguiente metaetiqueta en el archivo HTML. Esto le indica al navegador cómo debe escalar y mostrar la página en dispositivos móviles.

html

Esta imagen muestra una captura de pantalla del código fuente HTML con la metaetiqueta viewport resaltada.

Media Queries

Las media queries permiten aplicar diferentes estilos CSS en función de las características del dispositivo, como el ancho de la pantalla. Son la herramienta clave para lograr un diseño responsivo.

Ejemplo de media query básica

Las media queries permiten definir diferentes reglas CSS según el ancho de la pantalla. A continuación, se muestra un ejemplo donde se cambia el color de fondo dependiendo del tamaño de la pantalla.

css

Breakpoints comunes

Un breakpoint es el punto en el cual el diseño cambia para adaptarse mejor a una nueva resolución. Aquí algunos breakpoints comunes que suelen usarse en media queries:

• 320px: Tamaño de pantalla de teléfonos pequeños.
• 768px: Tamaño de pantalla de tabletas.
• 1024px: Pantalla de escritorio.
• 1440px y más: Pantallas grandes o de alta resolución.

css

Diseño mobile-first

El enfoque mobile-first significa diseñar primero para dispositivos móviles y luego agregar estilos adicionales para dispositivos más grandes. Este enfoque es ideal porque los teléfonos móviles son ahora los dispositivos más comunes para navegar por internet.

css

Se muestra un ejemplo visual que muestra cómo cambia el diseño mobile-first en dispositivos móviles y de escritorio

Imágenes responsivas

Las imágenes también deben ser responsivas para adaptarse al ancho de diferentes pantallas. Esto se puede lograr usando propiedades CSS como max-width o utilizando elementos HTML como <picture> y srcset para cargar diferentes imágenes según la resolución de la pantalla.

Ejemplo con CSS

css

Ejemplo con HTML y srcset

html

Conclusión

En este capítulo, hemos aprendido los fundamentos del diseño responsivo, incluyendo el uso de unidades flexibles, la metaetiqueta viewport, media queries y la creación de imágenes responsivas. Estas técnicas te ayudarán a crear páginas web que se vean bien en cualquier dispositivo. En el próximo capítulo, exploraremos cómo mejorar la navegación en sitios responsivos, lo que es fundamental para la usabilidad en dispositivos móviles.