API de Medios de Query de JavaScript

Recomendaciones de curso:

Atributos de MediaQueryList Objeto MediaQueryList

Atributos de MediaQueryList El objeto almacena la información de las consultas de medios.esEl objeto

Atributos de MediaQueryList El objeto se puede acceder de la siguiente manera:

window.matchMedia() o simplemente matchMedia():

Ejemplo

const mqlObj = window.matchMedia();
const mqlObj = matchMedia();

Prueba personalmente

Véase también:

Método window.matchMedia()

Atributo de MediaQueryList

Atributo Descripción
matches Valor booleano. Si el documento coincide con la consulta, es true, de lo contrario false.
media Valor de cadena. Consulta de medios (lista).

Método de MediaQueryList

Método Descripción
addListener() Agregar una nueva función de listener, que se ejecutará cada vez que cambie el resultado de evaluación de la consulta de medios.
removeListener()

Eliminar el listener previamente agregado de la lista de consultas de medios.

Si el listener especificado no está en la lista, no se realiza ninguna acción.

Consulta de medios

matchMedia() La consulta de medios del método puede ser Regla @media de CSS Cualquier característica de los medios, como min-height, min-width, orientación, etc.

Ejemplo

matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);

Prueba personalmente

Tipo de medio

Valor Descripción
all Predeterminado. Se utiliza para todos los dispositivos de tipo de medio.
print Para impresoras.
screen Para computadoras de escritorio, tabletas, smartphones y otros.
speech Lector de pantalla para

Características de los medios

Valor Descripción
any-hover ¿Hay algún mecanismo de entrada disponible que permita al usuario mantener el ratón sobre el elemento?
(Agregado en Media Queries Level 4).
any-pointer ¿Hay algún mecanismo de entrada disponible, como un dispositivo de punteros, y si es así, ¿cuál es su precisión?
(Agregado en Media Queries Level 4).
aspect-ratio La proporción de anchura y altura de la vista.
color El número de bits de cada componente de color del dispositivo de salida.
color-gamut El rango de colores aproximadamente soportado por el agente de usuario y el dispositivo de salida
¿Permite el mecanismo de entrada principal que el usuario coloque el cursor sobre el elemento?
Número de colores que puede mostrar el dispositivo. color-index
Número de colores que puede mostrar el dispositivo. grid
¿Es el dispositivo una rejilla o un mapa de bits? height
Altura del viewport. hover
¿Permite el mecanismo de entrada principal que el usuario coloque el cursor sobre el elemento?
(Agregado en Media Queries Level 4). inverted-colors
(Agregado en Media Queries Level 4).
¿El navegador o el sistema operativo de nivel inferior invierte los colores? light-level
Nivel actual del nivel de iluminación del entorno (Agregado en Media Queries Level 4). Relación de aspecto máxima de la área de visualización.
max-color Número máximo de bits de cada componente de color del dispositivo de salida.
max-color-index Número máximo de colores que puede mostrar el dispositivo.
max-height Altura máxima de la área de visualización, por ejemplo, la ventana del navegador.
max-monochrome Número máximo de bits de cada 'color' en dispositivos monocromáticos (escala de grises).
max-resolution Resolución máxima del dispositivo, utilizando dpi o dpcm.
max-width Ancho máximo de la área de visualización, por ejemplo, la ventana del navegador.
min-aspect-ratio Relación de aspecto mínima de la área de visualización.
min-color Número mínimo de bits de cada componente de color del dispositivo de salida.
min-color-index Número mínimo de colores que puede mostrar el dispositivo.
min-height Altura mínima de la área de visualización, por ejemplo, la ventana del navegador.
min-monochrome Número mínimo de bits de cada 'color' en dispositivos monocromáticos (escala de grises).
min-resolution Resolución mínima del dispositivo, utilizando dpi o dpcm.
min-width Ancho mínimo de la área de visualización, por ejemplo, la ventana del navegador.
monochrome Número de bits de cada 'color' en dispositivos monocromáticos (escala de grises).
orientation Dirección del viewport (modo horizontal o vertical).
overflow-block ¿Cómo maneja el dispositivo de salida el contenido que sobrepasa el viewport a lo largo del eje de bloques? (Agregado en Media Queries Level 4).
overflow-inline ¿Se puede desplazar el contenido que sobrepasa el viewport a lo largo del eje en línea? (Agregado en Media Queries Level 4).
pointer ¿Es el mecanismo de entrada principal un dispositivo de punteros? Si es así, ¿cuál es su precisión?
(Agregado en Media Queries Level 4).
resolution Resolución del dispositivo de salida, utilizando dpi o dpcm.
scan Proceso de escaneo del dispositivo de salida.
scripting ¿Se puede usar un script (por ejemplo, JavaScript)? (agregado en Media Queries Level 4).
update Cuán rápido puede modificar el dispositivo de salida el aspecto del contenido (agregado en Media Queries Level 4).
ancho Ancho de la vista.