Las Media Queries son una técnica de css3 que permite cambiar la presentación del contenido en función de los diferentes tamaños que vaya adoptando el viewport, es decir, el área visible de una página web, que varía dependiendo del dispositivo que estemos usando. Por lo que son la principal herramienta que tenemos para elaborar diseños responsive.
Siguen una sintaxis muy sencilla basada en un bloque condicional que se aplica únicamente si dicha condición se valida como verdadera.
Hay dos formas de crear una media query:
Incluir la evaluación de condiciones dentro de una hoja de estilos con la palabra reservada @media(condiciones){}.
@media (min-height: 350px) { /* reglas que van a aplicarse */ }O bien desde la etiqueta link para vincular una hoja de estilos externa, mediante el atributo media.
<link rel="stylesheet" media="only screen and (color)" href="hoja_externa.css" />Cabe mencionar que hay dos estrategias a la hora de diseñar nuestras media queries: desktop first o mobile first, prefiriendo normalmente la segunda. Aunque hablaré de esto en detalle en otro post, daré una breve explicación:
La idea que debemos tener cuando empezamos a diseñar la web es crear un diseño base que funcione sin usar media queries. No debemos especificar todos los estilos desde cero en cada media query, sino partir de un diseño para uno de los dispositivos que decidamos |que será el default y luego adaptar los otros con media queries, pero aprovechando todos los estilos y recursos que son comunes. Actualmente se recomienda diseñar pensando en móviles primero.
Sintaxis
La estructura de un media query consta de dos elementos: uno o varios media type separados por coma y cero, una o varias media features. Para aplicar el estilo que contiene un media query deben evaluarse como verdadero ambos elementos.
Media Types
El media type nos indica el tipo de dispositivo para el cual se van a aplicar los estilos. Es opcional ya que no indicarlo implica el tipo 'all'.
Si el media type no resulta verdadero no va a continuar evaluándose la media query.
- all: Aplica para cualquier dispositivo.
- screen: Aplica para pantallas de ordenadores, móviles y tabletas.
- print: Para indicar cómo se visualizará el sitio web cuando es impreso. *Es un medio paginado.
- handheld: Dispositivos de mano con pantalla pequeña y ancho de banda limitado, como fueron los móviles anteriores a los smartphone.
- speech: Aplica para sintetizadores de voz.
- tty: Aplica para terminales. Por ejemplo cuando se navega desde w3m, Links o Lynx.
Media features
Las media features o funciones multimedia son expresiones lógicas que representan características del dispositivo y pueden ir unidas entre sí por el operador lógico and.
Los operadores lógicos posibles son:
- and: Se usa para poder poner más de una media feature como condición. Implica que es necesario que todas las funciones multimedia resulten verdaderas para que la expresión completa lo sea también.
- lista separada por comas: Funciona como el operador 'or', e implica que el estilo css se aplicará si cualquiera de las media queries de la lista es verdadera.
- not: Se usa para negar la media query completa. No puede usarse para negar una función multimedia concreta de la expresión. Por ejemplo: @media not screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {}
- only: Previene que navegadores antiguos apliquen los estilos.
Antes de continuar, debemos conocer qué es un pixel lógico o pixel css, que es la unidad con la que trabaja siempre en html y css. Se trata de un pixel independiente de la densidad de pantalla, un concepto que se ha inventado ante la elevada densidad de pantalla que existe en los smartphone, lo que provocaba que se ciertos elementos se viesen muy pequeños en algunos dispositivos. Por lo tanto, cada dispositivo tiene su propia resolución lógica del mismo modo que tienen su propia densidad de píxeles. Por ejemplo un ordenador tiene un device-pixel-ratio:1 y un iphone X un valor de 3.
Una web muy recomendable para desarrolladores es: https://www.mydevice.io/ que nos muestra las densidades y ratios de los dispositivos más conocidos.
Disponemos de muchas funciones multimedia para elaborar nuestras expresiones, los más usados son:
- width(acepta prefijos min/max): Describe el ancho de la ventana del navegador.
- height (pref. min/max): Describe el alto de la ventana del navegador.
- device-height (pref. min/max): Describe el alto del dispositivo de salida.
- device-width (pref. min/max): Describe el ancho del dispositivo de salida.
- aspect-ratio (pref. min/max): Relación de aspecto de la ventana del navegador. Tiene el formato de una fracción de números enteros. ej: 16/9.
- device-aspect-ratio (pref. min/max): Relación de aspecto del dispositivo de salida.
- orientation: Permite indicar si el dispositivo está en horizontal(landscape) o vertical(portrait).
- resolution (pref. min/max): Describe la densidad de píxeles del dispositivo de salida en unidades dpi o dpcm.
- device-pixel-ratio (pref. min/max):Es el resultado de la división del número de píxeles físicos del dispositivo entre el número de píxeles lógicos. Esta función multimedia ya no se usa tanto, se usa más la densidad de píxeles.
IMPORTANTE: Es obligatorio que las funciones multimedia vayan siempre entre paréntesis.
Los prefijos son opcionales en algunas funciones multimedia y tienen las siguientes equivalencias:
min: '>=' es decir mayor o igual max: '<=' es decir menor o igual
Algunos Media Features para dispositivos comunes
/* ---------- smartphones ---------- */
@media only screen
and (max-width: 480px) {}
/* ----------- iPhone X ----------- */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (device-pixel-ratio: 3) {}
/* --------- iPad Pro 12.9" -------- */
@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1366px)
and (min-device-pixel-ratio: 2) {}