Método Window matchMedia()

Objeto Ventana de JavaScript

matchMedia()El método devuelve una nueva instancia de MediaQueryList, que representa el resultado de la interpretación de la cadena de consulta de medios especificada.

El valor del método matchMedia() puede serReglas @media de CSSCualquier función de medios, por ejemplo min-alto, min-ancho, orientación, etc.

Sintaxis:

window.matchMedia(mediaQueryString)

if (window.matchMedia("(min-ancho:　5(00px)).matches) {
　　　/*　La vista de portada viewport es al menos500 píxeles de ancho　*/
}
　　　/*　El ancho de la vista de portada viewport es menor de500 píxeles　*/
}

Compatibilidad del navegador

Los números en la tabla especifican la primera versión del navegador que completamente admite el método matchMedia():

Valor del parámetro

Detalles técnicos

Más ejemplos

Si el ancho de la vista es menor o igual que600 píxeles, el color de fondo será coral. Si es mayor que600, se convertirá en verde claro:

var size = window.matchMedia("(max-ancho:　600px)")
myFunc(size)　//　Llamar a la función de escucha en tiempo de ejecución
size.addListener(myFunc)　//　Agregar función de escucha en cambio de estado
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　}
　document.body.style.backgroundColor = "lightgreen";
　　}
}

Referencias relacionadas

Tutoriales CSS:Consulta de medios CSS

Objeto Ventana de JavaScript