Un media query es una característica de CSS. Te permite crear e implementar diseños que se adaptan a las propiedades del dispositivo que estás usando. Algunas de estas propiedades incluyen el alto y ancho de una página.

En esta breve guía, verás cómo puedes establecer múltiples propiedades de anchura en una regla de media query. Por ahora vamos a dar un vistazo a los fundamentos primero.

Cómo funcionan los Media Queries en CSS

Ahora que tienes una idea básica de lo que es un media query, echemos un vistazo a cómo funciona realmente esta particular característica de CSS.

Un media query básico luce así:

@media only screen and (max-width: 576px) {
    // hacer algo
}

@media only screen and (min-width: 576px) {
    // volver hacer algo
}

Esto significa que los estilos que se escriban dentro de las reglas de media querys anteriores sólo funcionarán o serán efectivos en las propiedades de ancho especificadas anteriormente.

Literalmente, está diciendo que a este ancho en particular (es decir, la propiedad max-width de 576px), CSS por favor aplica los estilos que voy a escribir aquí sólo a este ancho, desde un ancho inicial de 0px.

Propiedades max-width y min-width

Hay dos cosas que debes tener en cuenta al crear media queries para diferentes tamaños de pantalla: las propiedades max-width y min-width.

Cuando se pasa una propiedad max-width a un media query, CSS lo interpreta como un ancho que comienza en cero – eso si aún no se ha establecido una propiedad de ancho mínimo. Pronto llegaremos a eso.

Una vez que la propiedad max-width tiene un valor asignado, todos los estilos dentro de esa media query particular se aplicarán a cualquier dispositivo cuyo tamaño de pantalla abaque desde 0px hasta el ancho máximo especificado.

La propiedad min-width, por otro lado, toma el valor inicial que le has asignado y aplica los estilos dentro de la regla del media query hasta que se proporcione el siguiente max-width is provided. Digamos por ejemplo:

@media only screen and (min-width: 576px) {
    // aplicar los estilos aquí a partir de este ancho mínimo  de 
    // 576px (dispositivos con tamaño de pantalla medio)
}

Los estilos que se escriban en el media query anterior sólo serían aplicables a los dispositivos que se encuentren dentro del ancho mínimo especificado y superior.

Como establecer el rango de ancho de un Media Query

El método que acabamos de comentar de crear media queries aplicando sólo una propiedad width resuelve sólo un problema.

Al establecer "rango de ancho", tienes cierta flexibilidad a la hora de crear diseños que te brinda capacidad de respuesta en todos los anchos de dispositivos.

Establecer un "rango de ancho" particular no es diferente de la forma en que se crean los media queries. La única diferencia es la adición de más expresiones de media feature (es decir, los tamaños de ancho de pantalla).

Echa un vistazo:

@media only screen and (min-width: 360px) and (max-width: 768px) {
	// hacer algo en ese rango de ancho.
}

La media query anterior sólo funcionará para la expresión de características (el tamaño de pantalla del dispositivo móvil para el que está escribiendo un estilo) proporcionada anteriormente.

Toma la primera expresión de ancho proporcionada como valor inicial y la segunda como valor final.

¿Recuerdas que vimos la diferencia entre la propiedad max-width ymin-width mas arriba? Simplemente le estamos diciendo al navegador que aplique los estilos CSS que escribiremos dentro de esta regla a los dispositivos móviles con tamaños de pantalla de 360px a 768px.

En términos básicos, estamos construyendo diseños que serán responsivos desde anchos de dispositivos pequeños hasta anchos medios, como tabletas o dispositivos móviles.

Puedes echar un vistazo a algunos media breakpoints que están disponibles en la documentación de Bootstrap. Prueba jugango con ellos estableciendo los rangos de tamaño de pantalla que prefieras.

Probando Media Queries con Flexbox

Has visto cómo crear una media query básica que toma múltiples expresiones de tamaño de pantalla. Y has visto la diferencia entre las propiedades max-width y min-width y cómo aplicarlas.

En esta sección, veremos cómo crear un diseño simple cuya apariencia cambie en diferentes media breakpoints (tamaños de pantalla). Empezaremos por crear el  código que ontendra el diseño.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ejeplo de Media query</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="contenedor">
      <div class="cajas caja1">
        <h1>Priemra Caja</h1>
        <p>
		Información en la primera caja
        </p>
      </div>
      <div class="cajas caja2">
        <h1>Segunda Caja</h1>
        <p>
          Información en la segunda caja
        </p>
      </div>
  </body>
</html>

El fragmento anterior mostrará dos cajas con su respectiva información cuando se apliquen los estilos. Si deseas puedes ver el ejemplo de código completo aquí.

.contenedor {
  display: flex;
  flex-wrap: wrap;
  width: 980px;
  margin: 0 auto;
  margin-top: 40px;
}

@media only screen and (min-width: 320px) and (max-width: 576px) {
  .contenedor {
    width: 100%;
    padding-left: 23px;
    flex-direction: column-reverse;
  }
  .cajas {
    width: 100%;
  }
}

Si echas un vistazo al archivo CSS, verás que la media query tiene un ancho mínimo de 320px y un ancho máximo de 576px. Esto sólo significa que todos los estilos que irán en esta regla sólo serán aplicables a los dispositivos con anchos extra-pequeños y pequeños.

El diseño de las cajas también cambia en este rango de ancho particular. Eso se debe a que el selector .container tiene su propiedad flex-direction cambiada de row a column-reverse.

Puedes decidir experimentar con los otros valores que se pueden asignar a la propiedad flex-direction. Compruébalos aquí.

Conclusión

Sin establecer un rango de anchura, los estilos CSS del fragmento anterior se aplicarán a todos los dispositivos con un tamaño de pantalla mínimo de 576px y superior.

Cuando estableces un rango de anchura, obtienes un mejor control como desarrollador. Podrás especificar qué estilos deben aplicarse a un dispositivo con un tamaño de pantalla determinado, lo que proporciona a tu aplicación una mejor capacidad responsiva.

Gracias por leer este artículo. Por favor, compártalo si le ha ayudado a comprender por qué debe establecer rangos de anchura al crear media queries.

Traducido del artículo de Caleb Olojo - How to Set Width Ranges for Your CSS Media Queries