Cómo - Consultas de medios con JavaScript
Ejemplo
Si la ventana gráfica tiene menos o igual a 700 píxeles de ancho, cambie el color de fondo a amarillo. Si es mayor a 700, cámbialo a rosa.
function myFunction(x) {
if (x.matches) { // If media
query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call
listener function at run time
x.addListener(myFunction) // Attach listener
function on state changes
Uso de consultas de medios con JavaScript
Las consultas de medios se introdujeron en CSS3 y son uno de los ingredientes clave para el diseño web receptivo. Las consultas de medios se utilizan para determinar el ancho y el alto de una ventana gráfica para que las páginas web se vean bien en todos los dispositivos (equipos de escritorio, portátiles, tabletas, teléfonos, etc.).
El método window.matchMedia() devuelve un objeto MediaQueryList que representa los resultados de la cadena de consulta de medios CSS especificada. El valor del método matchMedia() puede ser cualquiera de las funciones multimedia de la regla CSS @media , como altura mínima, anchura mínima, orientación, etc.
Obtenga más información sobre consultas de medios en nuestro Tutorial de consultas de medios CSS
Obtenga más información sobre el diseño receptivo en nuestro tutorial de diseño web receptivo
Obtenga más información sobre el método window.matchMedia() en nuestra Referencia de JavaScript.