Media Query
Contenido
¿Que es un media query?
Una media query es una función de CSS3 que permite especificar la visualización de un documento para diferentes medios de salida y tamaños de pantalla.
La visualización se ajusta en función de determinadas condiciones como el tipo de medio, la orientación de la pantalla o su resolución.
Desde junio del 2012, las media queries se han convertido en un estándar de diseño responsive recomendado por el World Wide Web Consortium (W3C).
¿Para qué sirven las media queries?
Una parte esencial del diseño responsivo es crear una experiencia de uso adecuada para cada dispositivo. Así pues, las media queries se encargan de que la respuesta enviada a un navegador cliente contenga el tipo de visualización correcta según la página web, basándose en las propiedades inherentes al dispositivo en el que se ejecuta.
De este modo, antes de que una página web sea cargada y mostrada a los y las navegantes por un navegador, la información relacionada con los medios se recupera a través de las media queries.
Una gran ventaja del media query CSS es que no es necesario especificar las resoluciones y tamaños de pantalla adecuados para cada dispositivo, pues permite ajustar las páginas web a más de un tipo de dispositivo de salida y, en consecuencia, es un elemento clave de la optimización móvil y del diseño web responsive.
¿Como funcionan las media queries?
Las media queries CSS están conformadas por un tipo de medio (opcional) y una o más expresiones conocidas como características de medios. Asimismo, se pueden combinar múltiples media queries mediante operadores lógicos.
En este sentido, las media queries se especifican mediante: "@media" y asignando un bloque CSS a una página únicamente si se cumplen las condiciones que se muestran a continuación.
Así pues, el tipo de medio (media type) podría ser: un smartphone, una tableta, una impresora o un TV; y las características de los medios pueden determinarse como la orientación de la pantalla, la resolución, la altura, la anchura o los colores. Como resultado, se pueden utilizar para consultar los elementos de medio y sus características y para establecer breakpoints.
Consulta de tipos de medios mediante media query
El CSS para un determinado dispositivo de salida puede definirse en función de los tipos de medios (media types), sin embargo, esta consulta puede ser opcional. Si no se define ningún tipo de medio en el media query, se aplica automáticamente el valor por defecto "all".
Los valores más comunes utilizados en los tipos de medios son "screen" para pantallas de desktops, tabletas y smartphones; "print" para controlar la salida de impresión de un sitio web y "speech" para la salida en un lector de pantalla que lee el contenido en voz alta.
Ejemplo de código para consultar el tipo de medio:
@media screen {
/* Instrucciones CSS para la pantalla de salida*/
}
Consulta de las características de medios a través de media query
Las características de los medios son expresiones que establecen uno o más requisitos para un dispositivo de salida y que deben cumplirse para incluir los recursos CSS. Estas características pueden ser, por ejemplo, la orientación, la altura, la anchura y la resolución de una pantalla.
Por lo tanto, una expresión es verdadera si la característica se cumple, de lo contrario sería considerada como falsa. Además, si se definen varias características de medios en una consulta, todas deben ser verdaderas para que la consulta completa sea verdadera.
Ejemplo de código para consultar la característica multimedia "landscape":
@media all and (orientation: landscape) {
/* Instrucciones CSS para la salida en formato horizontal */
}
Breakpoints en los media queries
En el diseño responsive de una página web, los breakpoints o puntos de inflexión se establecen para la correcta visualización de determinados viewports. Es decir, un punto de inflexión es una condición resultante del media query que cambia el diseño de una página web en función a un determinado tamaño de pantalla.
Así pues, cuando se maqueta una página web responsiva es recomendable comenzar con el diseño para el dispositivo de salida más pequeño (smartphones) y luego adaptarla para tabletas, portátiles e incluso monitores grandes con breakpoints y CSS.
Si la visualización en la pantalla deja de ser coherente, lo más correcto es definir un punto de inflexión y el CSS correspondiente, puesto que el CSS, en este media query, sólo sobrescribe los estilos que son modificados por el punto de inflexión.
Además, los puntos de inflexión en las consultas de medios CSS se definen especificando un valor en píxeles.
Ejemplo de un código para un punto de inflexión en un ancho de 720 px:
@media screen and (max-width:720px) {
/*Instrucciones CSS para dispositivos con un ancho máx. de 720 px */
}
Por último, para garantizar la correcta visualización en cada dispositivo, hay que integrar una metaetiqueta viewport en la zona del encabezado del código HTML, la cual indicará a los navegadores cómo manejar las dimensiones y el escalado de la página. Su sintaxis es:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Donde:
"width=device-width" indica a los navegadores que utilicen el ancho de la pantalla en píxeles independientes del dispositivo. La directiva "initial-scale=1.0" garantiza una relación 1:1 entre los píxeles CSS y los píxeles independientes del dispositivo.
Ampliar conocimientos
- https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries
- https://www.mclibre.org/consultar/htmlcss/css/css-media-queries.html
| Sobre las autoras y autores: |
 |
Contenidos relacionados