Saltar al contenido principal

Media Queries en CSS: Qué Son, Para Qué Sirven y Cómo Usarlas

Media queries portada

Las media queries son una herramienta fundamental en el desarrollo web moderno. Permiten que tu sitio se adapte a diferentes dispositivos y tamaños de pantalla, mejorando la experiencia del usuario. En esta guía, aprenderás qué son las media queries, cómo funcionan y cómo implementarlas en tus proyectos.

¿Qué son las Media Queries?​

Las media queries son una poderosa funcionalidad introducida en CSS3 que permite adaptar el diseño de una página web a diferentes tamaños de pantalla y dispositivos. Utilizan la regla @media para aplicar estilos CSS condicionalmente, según características como el ancho de la pantalla, la resolución o la orientación del dispositivo.

¿Para qué sirven las Media Queries?​

Las media queries son clave para lograr un diseño web responsivo. Permiten que el contenido se vea correctamente en cualquier dispositivo: desde pantallas de escritorio hasta smartphones.

Cómo funcionan las Media Queries​

Las media queries funcionan evaluando ciertas condiciones del entorno del usuario, como el tamaño de la pantalla. Si las condiciones se cumplen, se aplican los estilos CSS definidos dentro de la media query.

Sintaxis de las Media Queries​

CSS
@media (condición) {
  /* Estilos CSS */
}

Condiciones Comunes​

  • max-width: Aplica estilos si el ancho de la pantalla es menor o igual al valor especificado.
  • min-width: Aplica estilos si el ancho de la pantalla es mayor o igual al valor especificado.
  • orientation: Aplica estilos según la orientación del dispositivo (portrait o landscape).
  • resolution: Aplica estilos según la resolución de la pantalla.
  • aspect-ratio: Aplica estilos según la relación de aspecto de la pantalla.
  • prefers-color-scheme: Aplica estilos según la preferencia de tema del usuario (claro u oscuro).
  • hover: Aplica estilos si el dispositivo admite interacciones de hover.

Ejemplos de implementación​

Cambiar el color de fondo según el tamaño de pantalla​

Si la ventana del navegador es de 600px o menor, el color de fondo será azul claro:

El siguiente enfoque es del tipo Mobile First. Si la ventana del navegador es de 600px o mayor, el color de fondo será azul claro. En medidas de pantalla menores a 600px se aplicará el color negro definido fuera del media query.

Cambiar el diseño según la orientación del dispositivo​

CSS
@media (orientation: portrait) {
  body {
    font-size: 16px;
  }
}
@media (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

Cambiar el diseño según la preferencia de tema del usuario​

CSS
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

Cambiar el diseño según la relación de aspecto​

CSS
@media (aspect-ratio: 16/9) {
  body {
    background-color: lightgreen;
  }
}

Cambiar el diseño según la capacidad de hover del dispositivo​

CSS
@media (hover: hover) {
  button {
    background-color: blue;
  }
}
@media (hover: none) {
  button {
    background-color: gray;
  }
}

Cómo usar Media Queries en tu proyecto​

Para usar media queries en tu proyecto, sigue estos pasos:

  1. Define tus puntos de ruptura: Decide en qué tamaños de pantalla quieres que cambie el diseño. Por ejemplo, puedes usar 600px, 900px y 1200px.
  2. Escribe tus estilos base: Crea un diseño que funcione bien en pantallas pequeñas (mobile-first).
  3. Agrega media queries: Utiliza la regla @media para aplicar estilos específicos a los puntos de ruptura definidos.
  4. Prueba en diferentes dispositivos: Asegúrate de que tu diseño se vea bien en todos los tamaños de pantalla y dispositivos.
  5. Optimiza el rendimiento: Agrupa media queries y evita duplicar estilos para mejorar la carga de la página.

Ejemplo completo de uso de Media Queries​

CSS
/* Estilos base para móviles */
body {
  font-size: 16px;
  background-color: white;
}
/* Media query para pantallas pequeñas */
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
/* Media query para pantallas medianas */
@media (min-width: 601px) and (max-width: 900px) {
  body {
    background-color: lightgreen;
    font-size: 18px;
  }
}
/* Media query para pantallas grandes */
@media (min-width: 901px) {
  body {
    background-color: lightcoral;
    font-size: 20px;
  }
}

Consideraciones al usar Media Queries​

  • Puntos de ruptura: Define puntos de ruptura lógicos basados en el contenido y el diseño, no solo en tamaños de pantalla específicos.
  • Compatibilidad: La mayoría de los navegadores modernos soportan media queries, pero siempre es bueno verificar la compatibilidad con navegadores antiguos si es necesario.
  • Rendimiento: Evita usar demasiadas media queries, ya que pueden afectar el rendimiento de la página. Agrupa estilos comunes para reducir la redundancia.
  • Orden de las media queries: Coloca las media queries al final de tu hoja de estilos o junto a los bloques de estilo que modifican para mantener la claridad y evitar conflictos.

Ventajas de usar Media Queries​

  • Diseño responsivo: Permite que tu sitio web se adapte a diferentes dispositivos y tamaños de pantalla, mejorando la experiencia del usuario.
  • Flexibilidad: Puedes ajustar el diseño y los estilos según las necesidades específicas de cada dispositivo.
  • Mejora del rendimiento: Al aplicar estilos específicos para cada dispositivo, puedes optimizar la carga y el rendimiento de tu sitio web.
  • Accesibilidad: Facilita la creación de sitios web accesibles, permitiendo que los usuarios con diferentes dispositivos y configuraciones vean el contenido de manera adecuada.

Media Queries y Diseño Responsivo​

Las media queries son una parte esencial del diseño responsivo. Permiten que el contenido se ajuste automáticamente a diferentes tamaños de pantalla, lo que mejora la usabilidad y la accesibilidad. Al combinar media queries con técnicas como flexbox y grid, puedes crear diseños complejos y adaptativos.

Media Queries y Diseño Mobile First​

El enfoque mobile-first implica diseñar primero para dispositivos móviles y luego usar media queries para adaptar el diseño a pantallas más grandes. Esto asegura que tu sitio web sea accesible y funcional en dispositivos móviles, que son cada vez más utilizados para navegar por la web.

Media Queries y Diseño Desktop First​

El enfoque desktop-first implica diseñar primero para pantallas grandes y luego usar media queries para adaptar el diseño a dispositivos más pequeños. Aunque menos común hoy en día, puede ser útil en ciertos contextos donde el público objetivo utiliza principalmente computadoras de escritorio.

Media Queries y Diseño Adaptativo​

El diseño adaptativo utiliza media queries para crear diseños que se ajustan a diferentes dispositivos y tamaños de pantalla. A diferencia del diseño responsivo, que fluye y se adapta continuamente, el diseño adaptativo utiliza puntos de ruptura específicos para aplicar estilos diferentes en cada uno.

Media Queries y Diseño Fluido​

El diseño fluido utiliza unidades relativas como porcentajes y em para crear un diseño que se adapta al tamaño de la pantalla. Las media queries complementan este enfoque al permitir ajustes específicos en puntos de ruptura definidos, mejorando aún más la adaptabilidad del diseño.

Media Queries y Diseño Modular​

El diseño modular implica crear componentes reutilizables que se pueden ajustar fácilmente con media queries. Esto permite que los desarrolladores creen diseños consistentes y adaptativos sin duplicar código, facilitando el mantenimiento y la escalabilidad del proyecto.

Media Queries y Diseño Basado en Componentes​

El diseño basado en componentes implica dividir el diseño en componentes independientes que pueden ser reutilizados y adaptados con media queries. Esto permite una mayor flexibilidad y escalabilidad, ya que cada componente puede tener sus propios estilos específicos para diferentes tamaños de pantalla.

Media Queries y Diseño Basado en Contenido​

El diseño basado en contenido se centra en adaptar el diseño según el contenido que se muestra. Las media queries permiten ajustar la presentación del contenido en función del tamaño de pantalla, asegurando que la información sea legible y accesible en todos los dispositivos.

Media Queries y Diseño Basado en Contexto​

El diseño basado en contexto implica adaptar el diseño según el entorno del usuario, como la ubicación, el dispositivo y las preferencias. Las media queries permiten ajustar los estilos según estas variables, mejorando la experiencia del usuario al proporcionar un diseño más relevante y personalizado.

Media Queries y Diseño Basado en Usuario​

El diseño basado en usuario implica adaptar el diseño según las preferencias y comportamientos del usuario. Las media queries permiten ajustar los estilos según las características del dispositivo, como el tamaño de pantalla y la orientación, mejorando la experiencia del usuario al proporcionar un diseño más adecuado a sus necesidades.

Media Queries y Diseño Basado en Funcionalidad​

El diseño basado en funcionalidad implica adaptar el diseño según las características y capacidades del dispositivo. Las media queries permiten ajustar los estilos según la resolución, la orientación y otras características del dispositivo, asegurando que el contenido se muestre de manera óptima en todos los dispositivos.

Media Queries y Diseño Basado en Rendimiento​

El diseño basado en rendimiento implica optimizar el diseño y los estilos para mejorar la velocidad de carga y la experiencia del usuario. Las media queries permiten aplicar estilos específicos según las capacidades del dispositivo, lo que puede ayudar a reducir el tamaño de los archivos CSS y mejorar el rendimiento general del sitio web.

Media Queries y Diseño Basado en Accesibilidad​

El diseño basado en accesibilidad implica adaptar el diseño para que sea usable por personas con discapacidades. Las media queries permiten ajustar los estilos según las preferencias del usuario, como el tamaño de fuente y el contraste, mejorando la accesibilidad del sitio web para todos los usuarios.

Media Queries y Diseño Basado en Usabilidad​

El diseño basado en usabilidad implica crear un diseño que sea fácil de usar y navegar. Las media queries permiten ajustar los estilos según el tamaño de pantalla y las características del dispositivo, mejorando la usabilidad al proporcionar una experiencia más intuitiva y accesible para los usuarios.

Media Queries y Diseño Basado en Experiencia de Usuario​

El diseño basado en experiencia de usuario (UX) implica crear un diseño que satisfaga las necesidades y expectativas del usuario. Las media queries permiten ajustar los estilos según el dispositivo y las preferencias del usuario, mejorando la experiencia general al proporcionar un diseño más adaptado y relevante.

Media Queries y Diseño Basado en Interacción​

El diseño basado en interacción implica adaptar el diseño según cómo los usuarios interactúan con el sitio web. Las media queries permiten ajustar los estilos según las capacidades del dispositivo, como el soporte para hover o táctil, mejorando la experiencia del usuario al proporcionar un diseño más adecuado a sus interacciones.

Media Queries y Diseño Basado en Contenido Dinámico​

El diseño basado en contenido dinámico implica adaptar el diseño según el contenido que se muestra en la página. Las media queries permiten ajustar los estilos según el tamaño de pantalla y las características del dispositivo, asegurando que el contenido dinámico se muestre de manera óptima en todos los dispositivos.

Media Queries y Diseño Basado en Contenido Estático​

El diseño basado en contenido estático implica adaptar el diseño según el contenido fijo que se muestra en la página. Las media queries permiten ajustar los estilos según el tamaño de pantalla y las características del dispositivo, asegurando que el contenido estático se muestre de manera óptima en todos los dispositivos.

Media Queries y Diseño Basado en Contenido Multimedia​

El diseño basado en contenido multimedia implica adaptar el diseño según el tipo de contenido que se muestra, como imágenes, videos o audio. Las media queries permiten ajustar los estilos según el tamaño de pantalla y las características del dispositivo, asegurando que el contenido multimedia se muestre de manera óptima en todos los dispositivos.

Media Queries y Diseño Basado en Contenido Interactivo​

El diseño basado en contenido interactivo implica adaptar el diseño según las interacciones del usuario con el contenido, como formularios, botones o enlaces. Las media queries permiten ajustar los estilos según el tamaño de pantalla y las características del dispositivo, mejorando la experiencia del usuario al proporcionar un diseño más adecuado a sus interacciones.

Mejores prácticas con Media Queries​

  • Usa múltiples puntos de ruptura según el diseño y el contenido (por ejemplo: 480px, 768px, 1024px).

  • Aplica el principio mobile-first, escribiendo estilos para móviles y luego ajustando con media queries.

  • Agrupa media queries al final de tu hoja de estilos o junto a los bloques de estilo que modifican.

Recursos