#17 Diseño responsive#17 Diseño responsive

Una web, muchas pantallas

Más de la mitad de las visitas a cualquier web llegan desde un móvil. El resto, desde tabletas, portátiles y pantallas enormes. No tiene sentido hacer una web para cada tamaño: lo que se hace es una sola web que se adapta. A eso se le llama diseño responsive (adaptable).

Buena noticia: ya llevas medio camino hecho. El HTML se adapta solo al ancho de la pantalla por naturaleza, y herramientas como max-width, flex-wrap o repeat(auto-fit, minmax()) ya son responsive. En esta lección añadimos las piezas que faltan.

1. La etiqueta viewport

Es la línea que pusimos en el esqueleto de la lección 3 sin explicarla del todo:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sin ella, el navegador del móvil finge ser un ordenador: dibuja la página como si la pantalla midiera unos 980px y luego la encoge para que quepa. Resultado: todo diminuto y hay que hacer zoom con los dedos. Con ella, le dices: «usa el ancho real del dispositivo».

2. Contenido flexible

Antes de escribir una sola media query, asegúrate de que nada tiene un ancho fijo que no quepa en un móvil:

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

.contenedor {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

• Imágenes fluidas: nunca más anchas que su contenedor, y sin deformarse.
• max-width en lugar de width para los contenedores.
• Un poco de padding a los lados, para que el texto no quede pegado al borde del móvil.

3. Media queries

Una media query es una regla con condición: «aplica estos estilos solo si la pantalla cumple esto».

@media (min-width: 768px) {
  /* Estas reglas solo se aplican en pantallas de 768px de ancho o más */
  h1 {
    font-size: 3rem;
  }
}

Dentro de las llaves de @media van reglas normales, con su selector y sus llaves. Fíjate en las dos llaves de cierre: una de la regla y otra de la media query.

Mobile first: primero el móvil

Hay dos formas de pensar, y la recomendada es mobile first (primero el móvil):

1. Escribe el CSS para el móvil, sin media queries. Suele ser lo más sencillo: todo en una columna.
2. Añade media queries con min-width para lo que cambia en pantallas más grandes.

1
2
3
4
5

¿Qué anchos uso?

No hay que diseñar para cada modelo de móvil. Los puntos de ruptura (breakpoints) se eligen donde tu diseño empieza a verse mal. Como punto de partida, estos sirven para casi todo:

Un caso real: el menú

En el móvil no cabe un menú horizontal con muchos enlaces. Una solución sencilla: en el móvil, todo en columna; a partir de 768px, logo a un lado y menú al otro.

1
2
3
4
5
6
7
8
9
10

Prueba en tamaño móvil con las DevTools

No necesitas un móvil para probar. En las DevTools (F12), pulsa el icono de móvil y tableta (o Ctrl + Mayús + M; en Mac, Cmd + Mayús + M). Arriba podrás elegir un modelo de móvil o arrastrar para cambiar el ancho, y ver tu web como en ese dispositivo.

Errores típicos

• Olvidar la etiqueta viewport: en el ordenador todo funciona, en el móvil no.
• Anchos fijos en píxeles (width: 800px) que obligan a desplazarse en horizontal en el móvil.
• Imágenes sin max-width: 100% que se salen de la pantalla.
• Olvidar una llave al cerrar la media query: todo lo que viene después deja de funcionar.
• Escribir la condición sin paréntesis: @media min-width: 768px no funciona; es @media (min-width: 768px).
• Mezclar min-width y max-width sin orden y que unas reglas pisen a otras. Elige mobile first y usa min-width.

Ejercicios

Ejercicio 1: la galería adaptable (fácil)

Haz que estas cajas estén en una columna en el móvil, en dos a partir de 500px y en cuatro a partir de 800px.

1
2
3

@media (min-width: 500px) {
  .galeria {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 800px) {
  .galeria {
    grid-template-columns: repeat(4, 1fr);
  }
}

Ejercicio 2: texto más grande en el ordenador (fácil)

El título mide 1.75rem en el móvil. Haz que mida 3rem a partir de 768px, y que el párrafo pase de 1rem a 1.25rem.

1
2

@media (min-width: 768px) {
  h1 {
    font-size: 3rem;
  }

  p {
    font-size: 1.25rem;
  }
}

Ejercicio 3: contenido con barra lateral (reto)

En el móvil, el artículo y la barra lateral van uno debajo del otro. A partir de 900px, deben ir lado a lado: el artículo con 3fr y la barra con 1fr.

1
2
3
4

.pagina {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .pagina {
    grid-template-columns: 3fr 1fr;
  }
}

Ficha resumen

• Responsive = una sola web que se adapta a cualquier pantalla.
• Siempre la etiqueta viewport en el <head>.
• Base flexible: box-sizing: border-box, img { max-width: 100%; height: auto; }, contenedores con max-width.
• Mobile first: CSS para el móvil y @media (min-width: …) para pantallas mayores.
• Puntos de ruptura donde tu diseño lo necesite (de partida, 768px y 1024px).
• Prueba con el modo dispositivo de las DevTools (Ctrl + Mayús + M).

Glosario