Media Queries en CSS: Diseño Responsivo Eficiente

¿Qué son las Media Queries?
Las media queries son una poderosa funcionalidad introducida en CSS3 que permite adaptar el diseño de una página web a diferentes tamaños de pantalla y dispositivos. Utilizan la regla @media
para aplicar estilos CSS condicionalmente, según características como el ancho de la pantalla, la resolución o la orientación del dispositivo.
¿Para qué sirven las Media Queries?
Las media queries son clave para lograr un diseño web responsivo. Permiten que el contenido se vea correctamente en cualquier dispositivo: desde pantallas de escritorio hasta smartphones.
Ejemplos
Si la ventana del navegador es de 600px o menor, el color de fondo será azul claro:
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
El siguiente enfoque es del tipo Mobile First. Si la ventana del navegador es de 600px o mayor, el color de fondo será azul claro. En medidas de pantalla menores a 600px no se aplicará el color.
@media (min-width: 600px) {
body {
background-color: lightblue;
}
}
Añadir un punto de interrupción
Supongamos que creaste un diseño con columnas usando CSS Flexbox o Grid, pero en pantallas pequeñas no se ve bien. Una media query puede cambiar el comportamiento del diseño para que cada columna ocupe el 100% del ancho en pantallas pequeñas y un porcentaje diferente en pantallas grandes.
En el siguiente ejemplo, tenemos un diseño de 1 columna de 100%, cuando la pantalla es más pequeña que 768px, y a partir de esta medida, los porcentajes cambian para situar tres columnas, una al lado de la otra hasta ocupar el 100% de la pantalla.
/* Para teléfonos móviles: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/*Para escritorio: */
.col-1 {
width: 35%;
}
.col-2 {
width: 40%;
}
.col-3 {
width: 25%;
}
}
Con la notación [class*="col-"]
aplicamos estilo a todas las clases que contengan col- en su nomenclatura.
El ejemplo anterior tiene un enfoque mobile first. Presta especial atención al uso de min-width para lograr este enfoque.
Mejores prácticas con Media Queries
-
Usa múltiples puntos de ruptura según el diseño y el contenido (por ejemplo: 480px, 768px, 1024px).
-
Aplica el principio mobile-first, escribiendo estilos para móviles y luego ajustando con media queries.
-
Agrupa media queries al final de tu hoja de estilos o junto a los bloques de estilo que modifican.
Consulta los siguientes tutoriales para aprender a crear interfaces web permitiendo distribuir el espacio entre los elementos de manera flexible y adaptable a diferentes tamaños de pantalla: Flexbox: introducción al diseño flexible | Grid: creación de diseños en cuadrícula.