{"id":31522,"date":"2024-11-12T12:39:38","date_gmt":"2024-11-12T12:39:38","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31522"},"modified":"2025-03-23T12:06:00","modified_gmt":"2025-03-23T12:06:00","slug":"Media_Query","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/Media_Query","title":{"rendered":"Media Query"},"content":{"rendered":"

\u00bfQue es un media query?<\/span><\/h2>\n
\n
\"Media<\/a> <\/p>\n
Imagen:<\/b> Media query – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Una media query es una funci\u00f3n de CSS3 que permite especificar la visualizaci\u00f3n de un documento para diferentes medios de salida y tama\u00f1os de pantalla.\n<\/p>\n

La visualizaci\u00f3n se ajusta en funci\u00f3n de determinadas condiciones como el tipo de medio, la orientaci\u00f3n de la pantalla o su resoluci\u00f3n.\n<\/p>\n

Desde junio del 2012, las media queries se han convertido en un est\u00e1ndar de dise\u00f1o responsive<\/a> recomendado por el World Wide Web Consortium (W3C).\n<\/p>\n

\u00bfPara qu\u00e9 sirven las media queries?<\/span><\/h2>\n

Una parte esencial del dise\u00f1o responsivo es crear una experiencia de uso adecuada para cada dispositivo. As\u00ed pues, las media queries se encargan de que la respuesta enviada a un navegador cliente contenga el tipo de visualizaci\u00f3n correcta seg\u00fan la p\u00e1gina web, bas\u00e1ndose en las propiedades inherentes al dispositivo en el que se ejecuta.\n<\/p>\n

De este modo, antes de que una p\u00e1gina web sea cargada y mostrada a los y las navegantes por un navegador, la informaci\u00f3n relacionada con los medios se recupera a trav\u00e9s de las media queries.\n<\/p>\n

Una gran ventaja del media query CSS es que no es necesario especificar las resoluciones y tama\u00f1os de pantalla adecuados para cada dispositivo, pues permite ajustar las p\u00e1ginas web a m\u00e1s de un tipo de dispositivo de salida y, en consecuencia, es un elemento clave de la optimizaci\u00f3n m\u00f3vil<\/a> y del dise\u00f1o web responsive<\/a>.\n<\/p>\n

\u00bfComo funcionan las media queries?<\/span><\/h2>\n

Las media queries CSS est\u00e1n conformadas por un tipo de medio (opcional) y una o m\u00e1s expresiones conocidas como caracter\u00edsticas de medios. Asimismo, se pueden combinar m\u00faltiples media queries mediante operadores l\u00f3gicos.\n<\/p>\n

En este sentido, las media queries se especifican mediante: \u00ab@media\u00bb y asignando un bloque CSS a una p\u00e1gina \u00fanicamente si se cumplen las condiciones que se muestran a continuaci\u00f3n.\n<\/p>\n

As\u00ed pues, el tipo de medio (media type) podr\u00eda ser: un smartphone, una tableta, una impresora o un TV; y las caracter\u00edsticas de los medios pueden determinarse como la orientaci\u00f3n de la pantalla, la resoluci\u00f3n, la altura, la anchura o los colores. Como resultado, se pueden utilizar para consultar los elementos de medio y sus caracter\u00edsticas y para establecer breakpoints.\n<\/p>\n

Consulta de tipos de medios mediante media query<\/span><\/h3>\n

El CSS para un determinado dispositivo de salida puede definirse en funci\u00f3n de los tipos de medios (media types), sin embargo, esta consulta puede ser opcional. Si no se define ning\u00fan tipo de medio en el media query, se aplica autom\u00e1ticamente el valor por defecto \u00aball\u00bb.\n<\/p>\n

Los valores m\u00e1s comunes utilizados en los tipos de medios son \u00abscreen\u00bb para pantallas de desktops, tabletas y smartphones; \u00abprint\u00bb para controlar la salida de impresi\u00f3n de un sitio web y \u00abspeech\u00bb para la salida en un lector de pantalla que lee el contenido en voz alta.\n<\/p>\n

Ejemplo de c\u00f3digo para consultar el tipo de medio:\n<\/p>\n

@media screen {\r\n\/* Instrucciones CSS para la pantalla de salida*\/\r\n}<\/pre>\n
Consulta de las caracter\u00edsticas de medios a trav\u00e9s de media query<\/span><\/h3>\n
Las caracter\u00edsticas de los medios son expresiones que establecen uno o m\u00e1s requisitos para un dispositivo de salida y que deben cumplirse para incluir los recursos CSS. Estas caracter\u00edsticas pueden ser, por ejemplo, la orientaci\u00f3n, la altura, la anchura y la resoluci\u00f3n de una pantalla.\n<\/p>\n
Por lo tanto, una expresi\u00f3n es verdadera si la caracter\u00edstica se cumple, de lo contrario ser\u00eda considerada como falsa. Adem\u00e1s, si se definen varias caracter\u00edsticas de medios en una consulta, todas deben ser verdaderas para que la consulta completa sea verdadera.\n<\/p>\n
Ejemplo de c\u00f3digo para consultar la caracter\u00edstica multimedia \u00ablandscape\u00bb:\n<\/p>\n
@media all and (orientation: landscape) {\r\n\/* Instrucciones CSS para la salida en formato horizontal *\/\r\n}<\/pre>\n
Breakpoints en los media queries<\/span><\/h3>\n
En el dise\u00f1o responsive de una p\u00e1gina web, los breakpoints o puntos de inflexi\u00f3n se establecen para la correcta visualizaci\u00f3n de determinados viewports<\/a>. Es decir, un punto de inflexi\u00f3n es una condici\u00f3n resultante del media query que cambia el dise\u00f1o de una p\u00e1gina web en funci\u00f3n a un determinado tama\u00f1o de pantalla.\n<\/p>\n
As\u00ed pues, cuando se maqueta una p\u00e1gina web responsiva es recomendable comenzar con el dise\u00f1o para el dispositivo de salida m\u00e1s peque\u00f1o (smartphones) y luego adaptarla para tabletas, port\u00e1tiles e incluso monitores grandes con breakpoints y CSS.\n<\/p>\n
Si la visualizaci\u00f3n en la pantalla deja de ser coherente, lo m\u00e1s correcto es definir un punto de inflexi\u00f3n y el CSS correspondiente, puesto que el CSS, en este media query, s\u00f3lo sobrescribe los estilos que son modificados por el punto de inflexi\u00f3n.\n<\/p>\n
Adem\u00e1s, los puntos de inflexi\u00f3n en las consultas de medios CSS se definen especificando un valor en p\u00edxeles.\n<\/p>\n
Ejemplo de un c\u00f3digo para un punto de inflexi\u00f3n en un ancho de 720 px:\n<\/p>\n
@media screen and (max-width:720px) {\r\n\/*Instrucciones CSS para dispositivos con un ancho m\u00e1x. de 720 px *\/\r\n}<\/pre>\n
Por \u00faltimo, para garantizar la correcta visualizaci\u00f3n en cada dispositivo, hay que integrar una metaetiqueta viewport en la zona del encabezado del c\u00f3digo HTML, la cual indicar\u00e1 a los navegadores c\u00f3mo manejar las dimensiones y el escalado de la p\u00e1gina. Su sintaxis es:\n<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>\n
Donde:\n<\/p>\n
\u00abwidth=device-width\u00bb indica a los navegadores que utilicen el ancho de la pantalla en p\u00edxeles independientes del dispositivo.
\nLa directiva \u00abinitial-scale=1.0\u00bb garantiza una relaci\u00f3n 1:1 entre los p\u00edxeles CSS y los p\u00edxeles independientes del dispositivo.\n<\/p>\n
Ampliar conocimientos<\/span><\/h2>\n