Lección 11 de 12 · Lectura y práctica
Media queries y diseño responsivo
En el panorama actual del desarrollo web, crear sitios que se adapten a cualquier dispositivo dejó de ser una opción para convertirse en una necesidad imperativa. Los usuarios acceden a la web desde teléfonos inteligentes,.
Del concepto a la práctica
Taller de esta lección
Una estrategia mobile first define primero la disposición estrecha y añade columnas solo cuando el contenedor tiene espacio. El punto de cambio debe responder a la ruptura observable del contenido, no a una lista fija de dispositivos. Para cuatro actividades, una columna evita tarjetas demasiado angostas; desde 700 px pueden aparecer dos.
Ejemplo resuelto
.agenda { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) {
.agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}Define una columna como estado base.
Prueba la página con 360 px de ancho.
Aplica la media query al alcanzar 700 px.
Comprueba que las tarjetas forman dos columnas sin duplicar contenido.
Error frecuente y corrección
Usar max-width: 700px para declarar el diseño amplio invierte la lógica y puede sobrescribir la base. Usa min-width para añadir mejoras desde el umbral elegido.
Pruébalo
Prueba la agenda a 360, 699 y 700 px de ancho con cuatro tarjetas iguales.
Comprueba tu resultado
A 360 y 699 px debe haber una columna; a 700 px deben aparecer dos. El HTML y el número de tarjetas deben permanecer idénticos en las tres pruebas.
El umbral mide el viewport, no el ancho de .agenda. Conserva el metadato viewport del documento inicial y comprueba también el ancho útil del contenedor después de padding; 700 px es una elección para esta práctica, no una garantía para cualquier texto.
Mapa de prácticaUn componente debe adaptarse cuando cambia su contenido o el ancho disponible. Las reglas de espacio y alineación conservan la relación entre sus elementos mientras el texto se ajusta. Prueba estados reales en lugar de diseñar solo una tarjeta ideal.
Ver la infografía en tamaño completo ↗Fuentes para profundizar
En el panorama actual del desarrollo web, crear sitios que se adapten a cualquier dispositivo dejó de ser una opción para convertirse en una necesidad imperativa. Los usuarios acceden a la web desde teléfonos inteligentes, tabletas, computadoras de escritorio e incluso televisores inteligentes, cada uno con diferentes tamaños de pantalla y resoluciones. El diseño responsivo es el enfoque que nos permite crear sitios web flexibles que responden y se adaptan a estas diversas condiciones de visualización.
Concepto Clave: El diseño responsivo se basa en la idea de que un mismo documento HTML puede visualizarse de manera óptima en cualquier dispositivo, modificando su presentación mediante CSS sin necesidad de crear versiones alternativas del sitio.
¿Qué son las Media Queries?
Las media queries son bloques de código CSS que permiten aplicar estilos específicos según las características del dispositivo de visualización. Constituyen el pilar fundamental del diseño responsivo moderno y forman parte de la especificación CSS3.
La sintaxis básica de una media query es la siguiente:
@media tipo-de-medio and (condición) {
/* Estilos que se aplican cuando se cumple la condición */
}Puntos de Quiebre (Breakpoints)
Los breakpoints son los puntos específicos en los que cambiamos el diseño para adaptarlo a diferentes tamaños de pantalla. Una estrategia común es definir breakpoints para dispositivos móviles, tabletas y escritorio.
Consejo: En lugar de apuntar a dispositivos específicos, enfócate en los rangos de ancho donde tu diseño se rompe. Esto hace tu código más mantenible y preparado para futuros dispositivos.
| Dispositivo | Ancho típico | Media Query recomendada |
|---|---|---|
| Móviles | 320px - 480px | @media (max-width: 480px) |
| Tabletas | 481px - 768px | @media (min-width: 481px) and (max-width: 768px) |
| Escritorio pequeño | 769px - 1024px | @media (min-width: 769px) and (max-width: 1024px) |
| Escritorio grande | 1025px en adelante | @media (min-width: 1025px) |
Mobile First vs Desktop First
Existen dos metodologías principales para construir diseños responsivos:
Mobile First
Esta metodología sugiere comenzar con los estilos para dispositivos móviles y luego agregar complejidad para pantallas más grandes mediante min-width.
- Define los estilos base para móviles (la configuración más simple)
- Usa
@media (min-width: ...)para añadir estilos para pantallas más grandes - Ventaja: El código para móviles es más ligero y se mejora progresivamente
Desktop First
Por el contrario, esta aproximación comienza con los estilos para escritorio y usa max-width para reducir la complejidad en dispositivos más pequeños.
Advertencia: Aunque Desktop First puede parecer más intuitivo, la metodología Mobile First generalmente produce código más limpio y tiene mejor rendimiento en dispositivos móviles.
Unidades Relativas en CSS
Para lograr un diseño verdaderamente responsivo, es fundamental dominar las unidades relativas de CSS:
| Unidad | Descripción | Uso recomendado |
|---|---|---|
| % | Porcentaje relativo al elemento padre | Anchos de contenedores, márgenes |
| vw | 1% del ancho de la ventana | Tipografía fluida, tamaños de encabezado |
| vh | 1% de la altura de la ventana | Alturas de secciones, hero images |
| em | Relativo al tamaño de fuente del elemento | Tamaño de fuente, espaciado basado en texto |
| rem | Relativo al tamaño de fuente raíz | Espaciado consistente, tamaño de fuente global |
Práctica: Creando un Layout Responsivo
Veamos cómo aplicar estos conceptos en un ejemplo real:
/* Estilos base (mobile first) */
.container {
width: 100%;
padding: 1rem;
}
/* Tableta */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
/* Escritorio */
@media (min-width: 1024px) {
.container {
width: 960px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}El diseño responsivo no se trata de crear sitios web para móviles o escritorio, sino de crear sitios web que funcionen bien en todas partes, donde el contenido fluya naturalmente como el agua.
La Etiqueta Viewport
Para que las media queries funcionen correctamente en dispositivos móviles, es esencial incluir la siguiente etiqueta meta en el <head> de tu documento HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Sin esta etiqueta, los navegadores móviles intentarán renderizar la página como si fuera de escritorio y luego la escalarán para caber en la pantalla, arruinando por completo la experiencia responsiva.
Recuerda: La etiqueta viewport indica al navegador que el ancho del sitio debe coincidir con el ancho del dispositivo y que la escala inicial debe ser 1.0.
Imágenes Responsivas
Las imágenes también deben adaptarse al contexto. Puedes usar CSS con max-width: 100% para que las imágenes no se desborden de su contenedor:
img {
max-width: 100%;
height: auto;
}Tip avanzado: HTML5 ofrece la etiqueta <picture> para servir diferentes imágenes según el tamaño de pantalla, permitiendo optimizar tanto la experiencia como el rendimiento.
Conclusión
El diseño responsivo es una habilidad fundamental para cualquier desarrollador web moderno. Dominar las media queries, entender los breakpoints, y utilizar unidades relativas te permitirá crear experiencias web que funcionen perfectamente en cualquier dispositivo. Recuerda siempre incluir la etiqueta viewport y probar tu diseño en múltiples dispositivos y tamaños de pantalla.
Evaluación de comprensión:
- ¿Cuál es la diferencia entre usar
min-widthymax-widthen una media query? - ¿Por qué se recomienda la metodología Mobile First?
- ¿Qué hace la etiqueta
<meta name="viewport">? - Nombra tres unidades CSS relativas útiles para diseño responsivo.
Sigue con HTML y CSS Moderno
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.