¿Qué es una consulta de medios CSS?

Una consulta de medios CSS es una técnica que permite aplicar diferentes estilos según las características del dispositivo, como el tamaño de pantalla, la resolución, la orientación o el esquema de color. Las consultas de medios son la base del diseño web responsive, permitiendo que los sitios web adapten su diseño y apariencia en diferentes dispositivos, desde smartphones hasta monitores de escritorio. Utilizan la regla @media en CSS para aplicar estilos condicionalmente solo cuando se cumplen ciertas condiciones.

Descripción de la herramienta

Esta herramienta te ayuda a generar consultas de medios CSS sin memorizar sintaxis complejas. Simplemente selecciona tu tipo de medio objetivo, especifica las dimensiones, elige las características del dispositivo, y la herramienta genera la regla @media completa lista para usar en tus hojas de estilo. Admite todas las características modernas de consultas de medios, incluidas las dimensiones del viewport, la orientación de la pantalla, las relaciones de aspecto, la detección de resolución y las preferencias de esquema de color.

Características

  • Selección de tipo de medio: Elige entre los tipos de medio all, screen, print o speech
  • Controles de dimensión: Establece el ancho/alto mínimo y máximo con cualquier unidad CSS (px, em, rem, vw, etc.)
  • Características del dispositivo: Configura la orientación, la relación de aspecto, la resolución y las preferencias de esquema de color
  • Condiciones personalizadas: Añade cualquier característica de medio personalizada como capacidad hover o tipo de puntero
  • Operadores lógicos: Combina condiciones usando operadores AND, OR o NOT para consultas complejas
  • Vista previa en vivo: Ve cómo se actualiza el código CSS generado en tiempo real mientras ajustas la configuración
  • Referencia de puntos de interrupción comunes: Acceso rápido a puntos de interrupción estándar para móvil, tablet, escritorio y características especiales

Casos de uso

  • Creación de diseños responsive que se adaptan a diferentes tamaños de pantalla
  • Dirigirse a dispositivos específicos como tablets o smartphones
  • Implementación de temas de modo oscuro y modo claro
  • Optimización de hojas de estilo para impresión
  • Detección de pantallas de alta resolución (retina)
  • Ajuste de diseños según la orientación del dispositivo
  • Construcción de diseños responsive mobile-first o desktop-first
  • Prueba y aprendizaje de la sintaxis de consultas de medios CSS