Diseño responsive y media queries
Tu web se va a ver en móviles, tablets, portátiles y monitores enormes. El diseño responsive es la práctica de que se vea (y funcione) bien en todos ellos, sin crear una web distinta para cada tamaño.
Mobile-first: empieza por lo pequeño
El enfoque recomendado hoy es diseñar primero para móvil, y luego ir añadiendo complejidad para pantallas más grandes — no al revés. Esto suele producir CSS más simple y webs más rápidas en el dispositivo donde más gente entra: el móvil.
Unidades relativas, no solo píxeles
Relativo al elemento padre. Un div con width: 50% ocupa la mitad del ancho de su contenedor.
Relativo al viewport (la ventana visible): 100vw es el ancho completo de la pantalla, 100vh el alto completo. Útil para secciones a pantalla completa.
Como viste en el módulo 3, relativo al tamaño de fuente raíz — ideal para que todo escale de forma coherente.
Media queries: reglas condicionales según el tamaño
Una @media aplica un bloque de CSS solo si se cumple
una condición — normalmente, un ancho mínimo o máximo de pantalla.
El CSS de dentro solo se aplica cuando la pantalla mide 768px o más. Es el patrón típico de mobile-first: defines el estilo base para móvil, y añades excepciones para pantallas grandes.
Este panel de vista previa es estrecho a propósito, así que normalmente verás el resultado "móvil" de tus media queries aquí dentro. Para comprobar el resultado de escritorio, copia el código en un archivo .html real y ábrelo en tu navegador a pantalla completa.
Breakpoints habituales
No hay una lista oficial, pero estos valores cubren la inmensa mayoría de los casos reales:
- ~480px — móviles
- ~768px — tablets
- ~1024px — portátiles pequeños
- ~1280px+ — escritorio
Elegir breakpoints basándote en modelos de móvil concretos ("el ancho exacto de un iPhone"). Los dispositivos cambian constantemente; en vez de eso, ajusta el breakpoint al punto donde tu propio diseño empieza a verse mal, sea cual sea ese número.
No olvides el meta viewport
Como viste en el Módulo 1 de HTML, sin
<meta name="viewport" content="width=device-width, initial-scale=1.0">
en el <head>, ninguna media query funcionará
correctamente en móvil: el navegador simulará una pantalla de escritorio y
reducirá todo con zoom.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Qué significa diseñar "mobile-first"?
2. ¿Qué hace @media (min-width: 768px) { ... }?
3. ¿Por qué es imprescindible el meta viewport para el diseño responsive?