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.