Media Queries
Las Media Queries en CSS son una herramienta fundamental para crear diseños web adaptativos (Responsive) que se ajustan a diferentes tamaños de pantalla, resoluciones y orientaciones de dispositivo. Funcionan como planificar la decoración de una casa: cada habitación requiere una disposición distinta de muebles y decoración según su uso, así como cada pantalla requiere estilos específicos para que la experiencia del usuario sea óptima.
En sitios de portafolio, las Media Queries permiten reorganizar galerías de proyectos de varias columnas a una sola columna en dispositivos móviles. En blogs y sitios de noticias, facilitan la lectura ajustando tamaños de fuente e imágenes según el ancho de pantalla. En e-commerce, permiten que las tarjetas de producto y botones de compra se adapten, evitando desbordamientos y mejorando la interacción. En portales gubernamentales, facilitan la presentación de formularios y tablas para todos los dispositivos.
En este tutorial aprenderás a crear Media Queries básicas y avanzadas, a utilizar min-width, max-width y orientación, y a aplicarlas en contextos reales. Así como organizar una biblioteca facilita encontrar un libro, estructurar correctamente las Media Queries asegura que el contenido sea accesible y legible en cualquier dispositivo.
Ejemplo Básico
css/* Basic Media Query Example */
body {
font-size: 16px; /* default font size */
background-color: #f8f8f8; /* default background */
}
/* Apply styles for screens smaller than 768px */
@media (max-width: 768px) {
body {
font-size: 14px; /* smaller font for mobile */
background-color: #eaeaea; /* lighter background for readability */
}
}Este ejemplo define primero estilos predeterminados para todos los dispositivos. La regla @media verifica si el ancho de pantalla es igual o menor a 768px, aplicando los estilos dentro del bloque solo en ese caso. El uso de max-width asegura que los estilos se activen en dispositivos más pequeños, como tablets y móviles.
Este enfoque es útil en blogs y sitios de noticias para mantener la legibilidad en pantallas pequeñas. En e-commerce, permite ajustar imágenes de productos y reorganizar el contenido para que no sea necesario hacer scroll horizontal. Media Queries actúan como ajustar los muebles en una habitación más pequeña, manteniendo funcionalidad y estética.
Ejemplo Práctico
css/* Practical Media Query Example for E-commerce Layout */
.container {
display: grid; /* using CSS Grid for layout */
grid-template-columns: repeat(3, 1fr); /* three equal columns */
gap: 20px; /* spacing between items */
}
.product {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
}
/* Tablet devices */
@media (max-width: 1024px) {
.container {
grid-template-columns: repeat(2, 1fr); /* two columns layout */
}
}
/* Mobile devices */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr; /* single column layout */
}
}Este ejemplo práctico utiliza CSS Grid para un layout de tienda online. Inicialmente, la cuadrícula tiene tres columnas. Cada tarjeta de producto tiene fondo blanco, padding y esquinas redondeadas.
La primera Media Query se aplica a tablets, cambiando a dos columnas; la segunda se aplica a móviles, mostrando una sola columna. Esto asegura que la navegación y lectura sean óptimas en cualquier dispositivo. De manera similar, en blogs y portafolios, se pueden reorganizar artículos o proyectos para mantener la coherencia visual y funcional, como reorganizar los muebles en una habitación según el tamaño.
Buenas prácticas incluyen el enfoque mobile-first, comenzando con estilos para dispositivos pequeños y luego expandiendo a pantallas más grandes, lo que mejora el rendimiento. Organiza las Media Queries de manera lógica, evita duplicaciones y usa nombres de clases claros para reducir conflictos de especificidad.
Errores comunes: ignorar usuarios móviles, definir breakpoints inapropiados, sobreescribir demasiadas reglas, anidar excesivamente Media Queries. Para depuración, usa DevTools y prueba en múltiples dispositivos. Recomendaciones: define breakpoints según contenido, estructura CSS de forma modular y prueba siempre la legibilidad y usabilidad, tal como se organiza una biblioteca para facilitar la búsqueda y el acceso a todos los libros.
📊 Referencia Rápida
| Property/Method | Description | Example |
|---|---|---|
| @media | Define media query | @media (max-width: 768px) { ... } |
| min-width | max-width | Set screen width range |
| orientation | Detect device orientation | @media (orientation: landscape) { ... } |
| hover | Apply styles based on pointer capabilities | @media (hover: hover) { ... } |
| pointer | Specify input device type | @media (pointer: coarse) { ... } |
En resumen, las Media Queries son esenciales para el diseño web adaptativo. Permiten modificar estilos según ancho de pantalla, orientación y capacidades del dispositivo, garantizando legibilidad y funcionalidad. Están directamente relacionadas con la estructura HTML, donde contenedores bien organizados facilitan la adaptación, y con JavaScript, que puede cambiar dinámicamente el comportamiento y layout.
Próximos pasos: estudiar CSS Grid y Flexbox junto con Media Queries, crear layouts interactivos adaptativos. La práctica constante y la prueba en diferentes dispositivos fortalecerá tus habilidades, permitiendo construir sitios profesionales y accesibles, como organizar una biblioteca o decorar una casa para cualquier visitante.
🧠 Pon a Prueba tu Conocimiento
Prueba tu Conocimiento
Pon a prueba tu comprensión de este tema con preguntas prácticas.
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior