← HTML + CSS Fundamentals

Diseñar para muchos tamaños

Un breakpoint es el ancho a partir del cual el diseño necesita cambiar. @media (max-width: 700px) aplica sus reglas cuando el viewport mide 700px o menos; las declaraciones interiores sustituyen o completan las reglas base.

En mobile-first, los estilos base resuelven pantallas pequeñas y @media (min-width: 700px) añade cambios para pantallas mayores. Con max-width, normalmente partes del escritorio y adaptas hacia abajo.

Imágenes flexibles, unidades relativas y layouts que cambian de columnas evitan desbordes. El preview Desktop, Tablet y Mobile permite comprobar cada adaptación.

01

Responsive design

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .cards { grid-template-columns: 1fr; }
}
Ahora te toca a ti
Usa lo que acabas de aprender.
Empezar ejercicios →