¿Qué es una Media Query?

Una Media Query es una regla o conjunto de reglas que se introducen en una hoja de estilo CSS con el objetivo de definir propiedades específicas para distintos tipos de medios. Por ejemplo, con una Media Query podemos especificar el ancho y el alto de un contenido, de manera que este se adapte a los límites de una impresora sin tener que cambiar el contenido original.

¿Qué es una Media Query?

Las Media Queries son fundamentales en el diseño web actual, ya que son la base del diseño responsive (responsivo o adaptable). Esto significa que con una misma maquetación HTML, nuestro diseño se adaptará a diferentes dispositivos y tipos de pantalla.

¿No te ha quedado demasiado claro? Seguro que después de ver varios ejemplos lo entenderás mejor.

Origen de las Media Queries

Aunque las Media Queries ya se plantearon en la primera versión de CSS allá por el año 1994, no fue hasta 2012 cuando los navegadores los incorporaron como estándar con la llegada de CSS3 y la recomendación del consorcio W3C.

Desde un principio se planteó la necesidad de encontrar una forma de representar el contenido HTML en pantallas con diferentes resoluciones, siempre desde el punto de vista del cliente. El problema se iba agravando a medida que se iban introduciendo pantallas más modernas y con resoluciones mayores, mientras que otros usuarios seguían con resoluciones antiguas.

Para que nos hagamos una idea de esta problemática, en 2012, año en que las Media Queries se convirtieron en estándar, convivían en el mercado más de una docena de resoluciones. Desde los 1024×768 píxels de los monitores CRT más antiguos hasta los 2560×1440 de los LCD más modernos en aquel momento. Y eso sin contar a los monitores 4K que estaban a punto de irrumpir en el mercado, ni por supuesto a los dispositivos móviles que ya suponían una parte importante de la navegación web.

Además, las Media Queries también se plantearon como una forma de mejorar la accesibilidad web. A través de ellas es posible, por ejemplo, aumentar el tamaño de las fuentes en determinados dispositivos o mejorar el contraste entre el color de la letra y el fondo.

Tipos de Medios

En la versión CSS3, podemos agregar distintos valores para seleccionar el tipo de medio al que se dirige la regla especificada en una Media Query.

Los valores que podemos definir son:

–all: Se utiliza para todos los tipos de medios o dispositivos.

–print: Se utiliza para impresoras

–screen: Se utiliza para pantallas de ordenador, tablets, teléfonos móviles, etc…

–speech: Se utiliza para lectores de pantalla, generalmente utilizados por personas con discapacidad visual.

Funciones de Medios

Las funciones de medios o Media Features son las características específicas que otorgamos a cada user-agent, navegador o dispositivo de salida. Aunque algunas de las que vamos a enumerar ya están obsoletas, las más importantes son:

–width: Ancho de la ventana de visualización.

–height: Alto de la ventana de visualización.

–aspect-ratio: Relación de aspecto ancho/alto de la ventana de visualización.    

–orientation: Orientación de la ventana de visualización .

–resolution: Densidad de píxeles del dispositivo de salida.            

–scan: Proceso de escaneado del dispositivo de salida.

–grid: ¿Utiliza el dispositivo una pantalla de cuadrícula o mapa de bits? 

–update: ¿Con qué frecuencia el dispositivo de salida puede modificar la apariencia del contenido?

–overflow-block: ¿Cómo maneja el dispositivo de salida el contenido que desborda la vista a lo largo del eje del bloque?

–overflow-inline: ¿Se puede desplazar el contenido que desborda la ventana de visualización a lo largo del eje en línea?

–color: Número de bits por componente de color del dispositivo de salida, o cero si el dispositivo no es de color.

–color-gamut: Rango aproximado de colores que son soportados por el user-agent y el dispositivo de salida.

–color-index: Número de entradas en la tabla de búsqueda de color del dispositivo de salida, o cero si el dispositivo no utiliza dicha tabla.          

–display-mode: El modo de visualización de la aplicación.

–monochrome: Bits por píxel en el búfer de fotogramas monocromo del dispositivo de salida, o cero si el dispositivo no es monocromo.        

–inverted-colors: ¿Está invirtiendo colores el agente de usuario o el sistema operativo subyacente?

–pointer: ¿Es el mecanismo de entrada principal un dispositivo señalador y, de ser así, cuán preciso es?

–hover: ¿El mecanismo de entrada principal permite al usuario pasar el ratón por encima de los elementos?

–any-pointer: ¿Es cualquier mecanismo de entrada disponible un dispositivo señalador y, de ser así, cuán preciso es?

–any-hover: ¿Hay algún mecanismo de entrada disponible que permita al usuario pasar el ratón por encima de los elementos?

–light-level: Nivel de luz del entorno.

–prefers-reduced-motion: El usuario prefiere menos movimiento en la página.

–prefers-reduced-transparency: El usuario prefiere una transparencia reducida.

–prefers-contrast: Detecta si el usuario ha solicitado que el sistema aumente o disminuya la cantidad de contraste entre los colores adyacentes.

–prefers-color-scheme: Detecta si el usuario prefiere un esquema de color claro u oscuro.

–forced-colors: Detecta si el user-agent restringe la paleta de colores.

-scripting: Detecta si está disponible el scripting (es decir, JavaScript).

–device-width: Ancho de la superficie de renderizado del dispositivo de salida (Obsoleto).

–device-height: Altura de la superficie de renderizado del dispositivo de salida (Obsoleto).

–device-aspect-ratio: Relación de aspecto ancho/alto del dispositivo de salida (Obsoleto).

Las Media Queries y el diseño responsive

Sin duda, el uso más frecuente las Media Queries es para realizar diseño adaptativo o responsive. El objetivo de utilizar una Media Query en una hoja de estilo CSS en nuestra página web es que se ejecute una regla o un conjunto de reglas si se cumple una condición determinada, como puede ser el ancho máximo de pantalla.

No debemos confundir el diseño responsivo realizado mediante CSS y Media Queries con tener una versión de nuestra web para cada dispositivo. La ventaja principal de utilizar las Media Queries es que partimos de un único diseño principal que se irá adaptando y reajustando en función del navegador, el dispositivo, la pantalla o las preferencias del usuario.

De esta manera podremos, por ejemplo, realizar un diseño que tenga una columna en dispositivos móviles, dos columnas en tablets y tres columnas en ordenadores portátiles y de sobremesa.

En las mejores prácticas de diseño responsive se recomienda realizar una maquetación orientada al concepto Mobile First. Esto significa diseñar para móvil antes de diseñar para escritorio o cualquier otro dispositivo (Esto hará que la página se muestre más rápido en dispositivos más pequeños).

Para ello, debemos hacer algunos cambios en nuestro CSS.

En lugar de cambiar de estilo cuando el ancho es inferior a 768px, deberíamos cambiar el diseño cuando el ancho es superior a 768px. Esto hará que nuestro diseño sea Mobile First.

Ejemplos de Media Queries

A continuación, vamos a ver un par de ejemplos de código para ver cómo poner en práctica las Media Queries. La mayoría de programadores colocan las Media Queries en hojas de estilo CSS específicas o a continuación del CSS general de la página. Como comentamos anteriormente, la regla específica se ejecutará sólo si se cumple una condición determinada.

En el primer ejemplo, el color del fondo será rojo solo si el ancho de la pantalla es inferior a 800 píxeles:

@media only screen and (max-width: 800px) {
  body {
    background-color: red;
  }
}

 Este ejemplo es muy sencillo, pero podemos ver de una forma clara cómo se declara la propiedad @media y la función screen para especificar el ancho de pantalla máximo.

A continuación, vemos otro ejemplo. En este caso utilizamos una Media Query para cambiar el tamaño de letra de un elemento determinado en diferentes tamaños de pantalla:

/* Si el tamaño de la pantalla es de 601px o más, ajusta el tamaño de la fuente de <div> a 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* Si el tamaño de la pantalla es de 600px o menos, ajusta el tamaño de la fuente de <div> a 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Conclusiones

En este artículo hemos hecho un breve repaso al concepto y propiedades de las Media Queries. Obviamente, el tema es mucho más extenso y con una simple búsqueda en internet podrás ampliar la información sobre cómo utilizarlas.

Si quieres ir al grano y empezar a maquetar tus propios diseños adaptables, puedes descargar alguna de las librerías o frameworks que integran toda la potencia del Media Query. Algunas de las más conocidas son Bootstrap o Foundation.

 No obstante, nosotros te recomendamos que eches un vistazo a CSS Grid, una forma mucho más pura de utilizar las Media Queries.

Gracias por leernos y si te ha gustado, ¡Compártelo!