Coincidencia de ventana Media()
Ejemplo 1
¿La pantalla/ventana gráfica tiene más de 700 píxeles de ancho?
if (window.matchMedia("(max-width: 700px)").matches) {
// Viewport is less or equal to 700 pixels wide
} else {
// Viewport is greater than 700 pixels wide
}
Definición y uso
El matchMedia()método devuelve una MediaQueryList con los resultados de la consulta.
Ver también:
Preguntas de los medios
Las consultas de medios del matchMedia()método pueden ser cualquiera de las funciones de medios de la
regla CSS @media , como altura mínima, ancho mínimo, orientación, etc.
Ejemplos
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Sintaxis
window.matchMedia(mediaQuery)
Parámetros
| Parameter | Description |
| mediaQuery | Required. A string representing a media query. |
Valor devuelto
| Escribe | Descripción |
| Un objeto | Un objeto MediaQueryList con los resultados de la consulta de medios. |
Ejemplos explicados
El primer ejemplo de esta página ejecuta una consulta de medios y la compara con el estado actual de la ventana.
Para ejecutar una consulta de medios receptiva siempre que cambie el estado de la ventana, agregue un detector de eventos al objeto MediaQueryList (consulte "Más ejemplos" a continuación):
Más ejemplos
Si la ventana gráfica tiene menos o igual a 500 píxeles de ancho, establezca el color de fondo en amarillo; de lo contrario, en rosa:
// Create a match function
function myFunction(x) {
if (x.matches) {
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// // Create a MediaQueryList object
const mmObj = window.matchMedia("(max-width: 700px)")
// Call the match function at run time:
myFunction(mmObj);
// Add the match function as a listener for state changes:
mmObj.addListener(myFunction);
Compatibilidad con navegador
matchMedia()es compatible con todos los navegadores modernos:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 11 | Yes | Yes | Yes | Yes |