Diseño responsive

Aprende a crear diseños que funcionen en cualquier pantalla con media queries, unidades relativas y la estrategia mobile-first.

Un diseño responsive se adapta al ancho de la pantalla del usuario, ya sea un móvil de 375px o un monitor de 1920px. CSS tiene las herramientas para hacerlo sin JavaScript.

La meta viewport

Antes de escribir una línea de CSS responsive, este <meta> debe estar en el <head> de tu HTML:

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

Sin él, el navegador móvil simula una pantalla de escritorio y hace zoom out, ignorando tus media queries.

Media queries

Las media queries aplican estilos solo cuando se cumplen ciertas condiciones:

/* Estilos base (móvil) */
.contenedor {
  padding: 1rem;
}

/* A partir de 768px */
@media (min-width: 768px) {
  .contenedor {
    padding: 2rem;
  }
}

/* A partir de 1200px */
@media (min-width: 1200px) {
  .contenedor {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Mobile-first: la estrategia correcta

Mobile first no significa diseñar solo para móvil. Significa entender que la mayoría de usuarios van a usar la aplicación desde el móvil y, por tanto, ese debe ser el contexto principal desde el que pensamos también la maquetación en CSS.

Esto implica:

  • Escribir primero los estilos base sin media queries
  • Priorizar estructura, contenido y funcionalidad
  • Construir layouts simples y limpios desde el inicio
  • Pensar en cómo se adapta el diseño antes de añadir complejidad

Hay dos enfoques:

Desktop-first: escribes los estilos para escritorio y usas max-width para adaptar a móvil.

Mobile-first (el estándar): escribes los estilos para móvil primero y usas min-width para añadir complejidad en pantallas más grandes.

.grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 1024px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

En móvil, por limitación de espacio, todo tiende a estructuras simples (normalmente en columna), mientras que en desktop es donde realmente podemos explotar la maquetación:

  • trabajar con grids
  • generar layouts más ricos
  • dividir en columnas
  • añadir jerarquía visual más compleja

Por tanto diseñamos el CSS con mentalidad mobile first (base simple y funcional), pero construimos experiencias completas que se expanden progresivamente en pantallas más grandes.

Breakpoints habituales

No hay breakpoints universales, pero estos son los más comunes:

/* Móvil pequeño: hasta 480px (estilos base) */

@media (min-width: 480px) { /* móvil grande */ }
@media (min-width: 768px) { /* tablet */ }
@media (min-width: 1024px) { /* desktop */ }
@media (min-width: 1280px) { /* desktop grande */ }

Elige los breakpoints donde tu diseño se rompe, no donde están los dispositivos. Un diseño fluido no depende de breakpoints exactos.

Unidades relativas

Son la base del responsive sin media queries:

/* % relativo al contenedor padre */
.columna { width: 50%; }

/* rem relativo al tamaño de fuente del root */
h1 { font-size: 2rem; }

/* em relativo al tamaño de fuente del elemento padre */
.subtitulo { font-size: 0.875em; }

/* vh / vw: porcentaje del viewport */
.hero { height: 100vh; }
.banner { width: 100vw; }

/* clamp(): tamaño fluido con mínimo y máximo */
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
p  { font-size: clamp(1rem, 2vw, 1.25rem); }

clamp(min, preferido, max) es especialmente útil para tipografía fluida: el tamaño crece con la pantalla, pero nunca sale de los límites.

Imágenes responsive

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

Con esto una imagen nunca desbordará su contenedor. Es una de las reglas que debería estar en cualquier reset CSS.

Ejemplo completo: layout de página responsive

/* Reset básico */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* Layout — mobile first */
.pagina {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.main-content {
  padding: 1.5rem 1rem;
}

.tarjetas {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* Tablet */
@media (min-width: 640px) {
  .tarjetas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .main-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }

  .tarjetas {
    grid-template-columns: repeat(3, 1fr);
  }
}

Lo que has aprendido en este curso

Con estas siete lecciones tienes las bases sólidas de CSS:

  1. ¿Qué es CSS? — la cascada, la sintaxis y las formas de incluirlo
  2. Selectores — apuntar exactamente al elemento correcto
  3. Modelo de caja — controlar tamaño y espaciado
  4. Colores y tipografía — identidad visual con variables CSS
  5. Flexbox — layouts unidimensionales
  6. Grid — layouts bidimensionales
  7. Responsive — diseños que funcionan en cualquier pantalla

El siguiente paso natural es el Curso de CSS Intermedio/Avanzado. Ahí pasas de “sé maquetar” a “sé escribir CSS que escala”: variables a fondo, pseudo-clases potentes, animaciones, posicionamiento real, funciones CSS y arquitectura.

Y si quieres una referencia rápida para repasar propiedades, selectores, layout y patrones habituales, tienes la Cheat Sheet completa de CSS.