Cómo usar consultas de medios con JavaScript

Uso de consultas de medios con JavaScript

Las consultas de medios se introdujeron en CSS3 y son uno de los elementos clave del diseño web responsivo. Las consultas de medios se utilizan para determinar el ancho y la altura de la vista, para que las páginas web se muestren bien en todos los dispositivos (computadoras de escritorio, laptops, tabletas, teléfonos móviles, etc.).

window.matchMedia() El método returna un objeto MediaQueryList, que representa el resultado de la cadena de consulta de medios CSS especificada.matchMedia() El valor del método puede ser CSS @media cualquier característica de media, como min-height,min-width,orientación etc.

Ejemplo

Si el ancho de la vista es menor o igual a 700 píxeles, cambia el color de fondo a amarillo. Si el ancho es mayor que 700, átalo con rosa:

function myFunction(x) {
  if (x.matches) { // Si la consulta de medios coincide
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}
// Crear objeto MediaQueryList
var x = window.matchMedia("(max-width: 700px)")
// Llamar a la función de escucha en tiempo de ejecución
myFunction(x);
// Añadir función de escucha en el cambio de estado
x.addEventListener("change", function() {
  myFunction(x);
);

Prueba por ti mismo

Páginas relacionadas

Tutoriales:Consulta de media CSS

Tutoriales:Diseño de páginas web responsivas

Manual de referencia:Método window.matchMedia() de JavaScript