Saltar al contenido principal

Media Queries en CSS: Diseño Responsivo Eficiente

Media queries portada

¿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:

CSS
@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.

CSS
@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.

CSS
/* 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.

tip

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.

info

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.