Media Queries

Diseña interfaces que se ven bien en cualquier pantalla con responsive design en CSS. A partir de un enfoque mobile first, aprenderás a priorizar contenido, usar flexbox y configurar media queries con puntos de quiebre claros para tablet y desktop. Además, verás cómo ajustar tipografías con rem y controlar la visibilidad por dispositivo sin perder accesibilidad.

¿Qué es responsive design y por qué empezar con mobile first?

El objetivo es evitar experiencias pobres: texto diminuto, necesidad de hacer zoom o scroll lateral y navegación confusa. Mobile first obliga a priorizar lo esencial en pantallas pequeñas y luego “crecer” el diseño conforme aumenta el espacio.

• Responsive design: adaptar la UI al dispositivo para una buena lectura y navegación.
• Mobile first: definir primero estilos base para móvil y escalar a tablet/desktop.
• Viewport: ancho visible que guía cuándo activar cambios con media queries.
• Accesibilidad con rem: tipografías que respetan ajustes del usuario.
• Habilidades trabajadas: configurar flexbox, definir puntos de quiebre con min-width, gestionar visibilidad con display, depurar con el inspector del navegador.

¿Cómo aplicar media queries con flexbox paso a paso?

La estrategia es clara: estilos base para móvil y, con media queries, reacomodar layout y visibilidad según el tamaño del viewport. Se usan puntos de quiebre en 768 px para tablet y 1024 px para desktop.

¿Qué estilos base definen el modo mobile?

• Contenedor en columna con separación y márgenes.
• Tarjetas con color de fondo, contraste y padding.
• Navegación vertical pensada para menú tipo hamburguesa.
• Secciones de visibilidad: mostrar “mobile” y ocultar “tablet” y “desktop”.
• Tipografías en rem: título y texto escalables.

/* Base: mobile first */
.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.box {
  background: #3498DB;
  color: white;
  padding: 20px;
  text-align: center;
}

.nav {
  background: #2c3e50;
  margin-bottom: 20px;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.nav-list a {
  display: block;
  color: white;
  padding: 10px;
  text-decoration: none;
}

/* Visibilidad por dispositivo */
.visibility { margin-bottom: 20px; }
.mobile { background: red; color: white; padding: 10px; }
.tablet { display: none; }
.desktop { display: none; }

/* Tipografía base */
.responsive.title { font-size: 1.5rem; }
.responsive.text { font-size: 1rem; }

¿Qué cambia en tablet con min-width: 768px?

• Reacomodo a fila con flex-direction: row.
• Tarjetas que crecen con flex: 1.
• Menú horizontal para aprovechar el ancho.
• Mostrar contenedor “tablet” y ocultar “mobile”.
• Título más grande con 2rem.

@media (min-width: 768px) {
  .container { flex-direction: row; }
  .box { flex: 1; }
  .nav-list { flex-direction: row; }

  .mobile { display: none; }
  .tablet {
    display: block;
    background: #F39C12;
    color: white;
    padding: 10px;
  }

  .responsive.title { font-size: 2rem; }
}

¿Qué cambia en desktop con min-width: 1024px?

• Ocultar “tablet” y mostrar “desktop”.
• Ajustar jerarquía tipográfica: título a 3rem y texto a 1.2rem.

@media (min-width: 1024px) {
  .tablet { display: none; }
  .desktop {
    display: block;
    background: green;
    color: white;
    padding: 10px;
  }

  .responsive.title { font-size: 3rem; }
  .responsive.text { font-size: 1.2rem; }
}

¿Qué ajustes de tipografía y visibilidad mejoran la experiencia?

El uso de rem permite que los tamaños de fuente se adapten al dispositivo y a las preferencias del usuario. Se definen escalas claras: 1.5rem en móvil, 2rem en tablet y 3rem en desktop para el título; el texto pasa de 1rem a 1.2rem en desktop. La visibilidad se controla con display: none/block para mostrar solo el bloque pertinente a cada tamaño.

• Tipografía responsive con rem para accesibilidad.
• Visibilidad por dispositivo: .mobile, .tablet, .desktop.
• Flexbox para alternar entre columna y fila según espacio disponible.
• Media queries con min-width en 768 px y 1024 px.
• Prueba práctica: usar el inspector y observar el número del viewport al redimensionar.
• Depuración común: verificar clases si un estilo no aplica por un error tipográfico.

¿Te funcionó este enfoque de mobile first con media queries? Comparte tus dudas o ejemplos en los comentarios.