¿Qué es Media Query?

Una media query es una característica fundamental de CSS que permite adaptar el diseño y la presentación de un sitio web según las características del dispositivo en el que se está visualizando. Con las media queries, puedes aplicar estilos específicos basados en aspectos como el ancho de la pantalla, la orientación, la resolución y otros factores.

Cómo usar Media Query

Para utilizar media query, simplemente debes definir un conjunto de reglas CSS que se aplicarán solo cuando se cumpla una condición específica. Estas condiciones se establecen utilizando los llamados “breakpoints”, que son puntos de ruptura basados en el ancho de la pantalla.

Breakpoints más utilizados

Algunos de los breakpoints más utilizados son:

320px – Para dispositivos móviles y pantallas pequeñas.

768px – Para tabletas en orientación vertical.

1024px – Para tabletas en orientación horizontal y pantallas de escritorio.

Uso de max-width en media query

Cuando utilizas max-width en un media query, las reglas de estilo se aplicarán cuando el ancho de la pantalla sea igual o menor al valor especificado. Esto significa que las reglas se activarán en pantallas más pequeñas.

Uso de min-width en media query

Por otro lado, cuando empleas min-width, las reglas de estilo se activarán cuando el ancho de la pantalla sea igual o mayor al valor especificado. Esto implica que las reglas se aplicarán en pantallas más grandes.

¿Qué significa la declaración @media screen?

La declaración @media screen especifica que la regla se aplicará en pantallas de visualización. Esto asegura que las reglas de la media query solo afecten a la presentación visual en lugar de otros medios, como la impresión.

Ejemplos de Media Query

1. Cambio de color para pantallas con un tamaño menor de 768px:

@media screen and (max-width: 768px) {
  body {
    background-color: #f4f4f4;
  }
}

2. Alineación de texto en pantallas medianas con un ancho entre 768px y 1024px:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .contenido {
    text-align: center;
  }
}

Resumen

Las media queries son herramientas poderosas para crear diseños web responsivos que se adaptan a una variedad de dispositivos y pantallas. Al utilizar breakpoints y condiciones basadas en el ancho de la pantalla, puedes personalizar la apariencia de tu sitio web para ofrecer una experiencia óptima en cualquier contexto. Ya sea ajustando colores, alineando contenido o reorganizando elementos, las media queries te permiten brindar una experiencia coherente y atractiva para tus usuarios, sin importar cómo accedan a tu sitio.

Si has encontrado útil y te ha gustado lo que has leído, te animamos a compartirlo en las redes sociales y suscribirte a nuestra newsletter para recibir nuestras últimas novedades.

Hasta el próximo término