Definición de media query
Media query es una característica avanzada de CSS que permite adaptar el contenido y el diseño de un sitio web a diferentes tamaños de pantalla, resoluciones y características del dispositivo. Gracias a las media queries, el sitio web puede ofrecer una experiencia visual y funcional coherente en computadoras de escritorio, notebooks, tabletas y celulares.
Media query es un pilar fundamental del diseño web responsivo. Permite personalizar la apariencia del sitio según el dispositivo o el entorno en el que se visualiza, ajustando elementos como el tamaño de la fuente, la disposición de las imágenes, la visibilidad de menús y la estructura general de las páginas.
Ejemplo de media query:
@media screen and (max-width: 768px) {
header { height: 70px; }
article { font-size: 14px; }
img { max-width: 480px; }
}
En el ejemplo anterior, la media query se activa cuando la ventana del navegador web tiene un ancho igual o menor a 768 píxeles. Esto puede suceder si el usuario achica la ventana en una computadora de escritorio o si accede al sitio desde un dispositivo móvil con pantalla pequeña.
Las media queries funcionan como filtros que aplican estilos CSS solo cuando se cumplen ciertas condiciones sobre el entorno del usuario. Entre los filtros más comunes se encuentran:
- min-width y max-width: para establecer rangos de ancho de pantalla.
- min-device-width y min-device-height: para definir límites según el tamaño físico del dispositivo.
- aspect-ratio: para detectar la relación de aspecto de la pantalla.
- orientation: para diferenciar entre orientación vertical (portrait) u horizontal (landscape).
- resolution: para aplicar estilos según la densidad de píxeles.
El uso de media queries permite modificar dinámicamente diferentes elementos del sitio web, como el tamaño de las fuentes, la disposición de los menús, la visibilidad de imágenes y secciones, e incluso el comportamiento de algunos componentes interactivos.
Ventajas:
- Mejora la experiencia de usuario en cualquier dispositivo.
- Facilita el posicionamiento en buscadores, ya que Google prioriza sitios adaptativos.
- Reduce la necesidad de crear versiones separadas del sitio para cada dispositivo.
- Permite un mantenimiento y actualización más sencillo del diseño web.
Desventajas:
- Puede aumentar la complejidad del código CSS.
- Si no se planifica correctamente, puede generar inconsistencias visuales entre dispositivos.
Comparación:
- A diferencia de las hojas de estilo específicas para dispositivos (por ejemplo, estilos solo para móviles), las media queries permiten un enfoque unificado y flexible.
- Comparado con el diseño adaptativo (que usa puntos de corte fijos), el diseño responsivo con media queries ofrece una adaptación más fluida a cualquier tamaño de pantalla.
Resumen: media query
La media query es una herramienta de CSS que permite adaptar el contenido de un sitio web a diferentes tamaños de pantalla y características del dispositivo. Es esencial en el diseño web responsive para personalizar la apariencia y funcionalidad según el dispositivo utilizado por el usuario.
¿Qué es una media query y cuál es su función en un sitio web?
La media query es una característica de CSS que permite al contenido de un sitio web adaptarse a diferentes tamaños de pantalla, resoluciones y características del dispositivo. Su función principal es personalizar la apariencia y el comportamiento de un sitio web según el entorno de visualización.
¿Cómo se activa un media query en CSS?
Un media query se activa cuando se cumplen las condiciones especificadas en la regla CSS. Por ejemplo, en el código proporcionado, la media query se activa cuando el ancho de la pantalla del navegador es igual o menor a 768 píxeles.
¿Qué sucede si un usuario reduce la ventana del navegador en una computadora de escritorio?
Si un usuario reduce la ventana del navegador en una computadora de escritorio, la media query se activa si el ancho de la ventana es igual o inferior a la condición establecida, permitiendo que el contenido se adapte automáticamente al nuevo tamaño.
¿Qué sucede si se accede al sitio web desde un dispositivo móvil pequeño?
Si se accede al sitio web desde un dispositivo móvil pequeño, como una tableta o un celular, la media query se activa si el tamaño de la pantalla cumple con la condición definida, adaptando el diseño y los elementos del sitio a las dimensiones y resolución del dispositivo.
¿Cuáles son algunos de los filtros utilizados en los media queries para clasificar pantallas?
Algunos filtros comunes en media queries son: min-width, max-width, min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation y resolution. Estos permiten aplicar estilos específicos según las características del dispositivo o la pantalla.
¿Cuál es la importancia de los media queries en el diseño de sitios web?
Los media queries son fundamentales en el diseño de sitios web modernos, ya que facilitan la adaptación del contenido a diferentes dispositivos y tamaños de pantalla. Esto asegura una mejor experiencia de usuario, accesibilidad y rendimiento, además de contribuir al éxito del sitio web en términos de usabilidad y SEO.
Autor: Leandro Alegsa
Actualizado: 14-07-2025
¿Cómo citar este artículo?
Alegsa, Leandro. (2025). Definición de media query. Recuperado de https://www.alegsa.com.ar/Dic/media_query.php
