Diseño responsivo: media queries, unidades relativas

Adapta tus interfaces a cualquier tamaño de pantalla con el enfoque mobile-first, las media queries y las unidades rem, % y vw.

9 min · 3 preguntas

El enfoque profesional es mobile-first: primero escribes los estilos para pantalla pequeña y luego mejoras la maquetación a medida que aumenta el espacio, usando media queries min-width. El CSS base se mantiene sencillo, y cada punto de ruptura solo añade lo que realmente cambia.

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

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

En cuanto a las unidades, destierra los píxeles para la tipografía. 1rem equivale al tamaño de fuente del elemento raíz (16px por defecto) y, sobre todo, respeta la configuración de tamaño de texto que el usuario ha elegido en su navegador. Un usuario con discapacidad visual que fije su fuente en 20px verá todo tu sitio escalar en proporción, siempre que hayas usado rem.

h1 {
  font-size: 2.5rem;
}

p {
  font-size: 1rem;
}

.section {
  padding: 4rem 1.5rem;
}

Para los anchos, combina unidades relativas: % para ocupar una parte del padre, max-width para limitarlo en pantallas grandes, vw para tamaños ligados al ancho del viewport (1vw equivale al 1% de él). La función clamp(min, ideal, max) crea valores fluidos que se adaptan sin ninguna media query, perfecta para los títulos grandes.

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. En un enfoque mobile-first, ¿qué media query usas para apuntar a las pantallas grandes?
   • @media (max-width: 768px)
   • @media (min-width: 768px)
   • @media (device: desktop)
2. Por defecto, ¿a qué corresponde 1rem?
   • 10 píxeles, un valor fijo del estándar CSS
   • El tamaño de fuente del elemento padre
   • El tamaño de fuente del elemento raíz, 16px por defecto
3. ¿A qué equivale 50vw?
   • Al 50% del ancho del viewport
   • Al 50% del ancho del elemento padre
   • A 50 píxeles sin importar la ventana