Diseño responsivo

1.Qué es el diseño responsivo

Tu página la verá gente con un celular de 360px, una tableta, un portátil y un monitor de 27 pulgadas. Diseño responsivo es que una sola página se adapte bien a todos, sin versiones separadas.

Se apoya en tres ideas:

1. Layout fluido: anchos relativos (%, fr, max-width) en lugar de píxeles fijos.
2. Contenido flexible: imágenes y textos que se ajustan a su contenedor.
3. Media queries: reglas que cambian el diseño en ciertos tamaños o condiciones.

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

2.Primero el móvil (mobile-first)

La estrategia más sencilla: escribe tus estilos base pensando en la pantalla más pequeña y, a medida que el espacio crece, añade mejoras con media queries min-width.

/* Base: móvil, una columna */
.tarjetas { display: grid; gap: 16px; }

/* A partir de 600px: dos columnas */
@media (min-width: 600px) {
  .tarjetas { grid-template-columns: repeat(2, 1fr); }
}

/* A partir de 960px: cuatro columnas */
@media (min-width: 960px) {
  .tarjetas { grid-template-columns: repeat(4, 1fr); }
}

▶ Ver animación

3.Media queries en detalle

@media (min-width: 768px) and (orientation: landscape) { … }
@media (max-width: 600px), print { … }          /* coma = "o" */
@media not print { … }

/* Solo mostrar efectos hover donde hay ratón */
@media (hover: hover) { .tarjeta:hover { transform: translateY(-4px); } }

¿Qué puntos de ruptura usar?

No existen medidas «oficiales». Una referencia común:

4.Valores fluidos: menos media queries

Con unas pocas funciones puedes lograr que tamaños y espacios se adapten de forma continua:

.contenido {
  width: min(100% - 2rem, 70rem);    /* 1rem de aire a cada lado, máximo 70rem */
  margin-inline: auto;
}
h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }
.seccion { padding-block: clamp(2rem, 6vw, 5rem); }

5.Imágenes y medios responsivos

img, video, svg {
  max-width: 100%;
  height: auto;       /* conserva la proporción */
  display: block;
}

.hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;  /* recorta en vez de deformar */
}

• Ya viste en la lección 8 de HTML cómo ofrecer imágenes distintas con srcset y <picture>.
• Para videos incrustados con <iframe>, mantén la proporción con aspect-ratio: 16 / 9; width: 100%; height: auto;.
• Las imágenes de fondo también pueden adaptarse con media queries: una versión ligera en móvil y una grande en escritorio.

6.Container queries: componentes que se adaptan a su espacio

Una media query mira la ventana. Pero un componente (una tarjeta) puede estar en una barra lateral estrecha o en una zona ancha en la misma pantalla. Con las container queries el componente responde al tamaño de su contenedor:

.envoltura { container-type: inline-size; }

.tarjeta { display: grid; gap: 8px; }

@container (min-width: 420px) {
  .tarjeta { grid-template-columns: 120px 1fr; }
}

7.Cómo probar tu diseño responsivo

1. Modo dispositivo: en las herramientas (F12), pulsa el icono de móvil o Ctrl + Shift + M. Elige un celular o arrastra el borde para cualquier ancho.
2. Reduce la ventana de tu navegador de escritorio hasta 320px: es el ancho más pequeño razonable.
3. Aumenta el zoom al 200%: así se ve en pantallas pequeñas y para quien agranda el texto.
4. Prueba en un celular real, al menos una vez. Lo táctil (botones de 44px o más) no se aprecia en el escritorio.
5. Gira el dispositivo: vertical y horizontal.

8.Errores frecuentes

• Olvidar la etiqueta viewport y preguntarse por qué las media queries no funcionan en el celular.
• Anchos fijos en px (width: 960px): causan scroll horizontal.
• Mezclar min-width y max-width sin plan y que las reglas se pisen.
• Ocultar contenido en móvil (display: none) en lugar de reorganizarlo.
• Texto demasiado pequeño en móvil (menos de 16px).
• Botones y enlaces diminutos: el área táctil mínima recomendada es ~44×44px.
• Probar solo en tu pantalla.

9.Glosario