1

tengo este script que practicamente funciona igual que un media query, necesito optimizarlo ya que estoy repitiendo varias veces una variable, además no se si está bien crear varias funciones con addEventListener al final, he intentado crear una variable global antes de la funcion mq var changeColorBody = document.querySelector('body').style.backgroundColor = color; y luego llamarla dentro de cada if agregando solo changeColorBody, pero no se muestra el color del body cuando pongo la variable, en cambio si pongo la variable completa, ahora si me muestra el color, creo q esto se debe porque cuando defino al principio la variable color como vacia, el color del body siempre será "vacio" , segundo estoy repitiendo el addEventListener con tres variables: tablet, medium y medium_mobile, he intentado usar tablet.add(mobile, medium_mobile).addEventListener("change", function(e) { mq(tablet, mobile, medium_mobile); }); para reducir las lineas, pero me marca que add no es una funcion, espero me puedan ayudar a optimizar este codigo de practica, gracias de antemano.

document.addEventListener('DOMContentLoaded', function(){
const tablet = window.matchMedia('(max-width: 1024px)');
const mobile = window.matchMedia('(max-width: 768px)');
const medium_mobile = window.matchMedia('(max-width: 360px)');
var color = '';

function mq(){
if (tablet.matches) {
    color = 'blue';
    var changeColorBody = document.querySelector('body').style.backgroundColor = color;

    if(mobile.matches){
        color = 'yellow';
        var changeColorBody = document.querySelector('body').style.backgroundColor = color;

        if(medium_mobile.matches){
        color = 'lightblue';
        var changeColorBody = document.querySelector('body').style.backgroundColor = color;
        }
    }

} else {
    color = 'orange';
    var changeColorBody = document.querySelector('body').style.backgroundColor = color;
}
    }

mq();

tablet.addEventListener("change", function() { 
    mq(tablet);
});
mobile.addEventListener("change", function() { 
    mq(mobile);
});
medium_mobile.addEventListener("change", function() { 
    mq(medium_mobile);
});

    });
<!DOCTYPE html>
<html>
<head>
    <title>Media Query con Javascript</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width"/>
</head>
<body>
<!-- Practicamente no hay nada -->
</body>
</html>

1 respuesta 1

1

Para reducir líneas hay dos opciones:

  1. Definir color por defecto dentro de la función y usar if {} else if {} para analizar primero la resolución más baja y, al final, la más alta. Al finalizar las comparaciones, solo una vez se asigna color a body.

  2. Realmente no veo problema en agregar eventos a cada matchMedia, pero puedes intentar asignándolo a cambio de tamaño en ventana.

document.addEventListener('DOMContentLoaded', function(){
  const tablet = window.matchMedia('(max-width: 1024px)');
  const mobile = window.matchMedia('(max-width: 768px)');
  const medium_mobile = window.matchMedia('(max-width: 360px)');

  function mq() {
    // Color por defecto
    let color = 'orange';
    // Analizar para actualizar color
    if(medium_mobile.matches) {
        color = 'lightblue';
    } else if(mobile.matches) {
        color = 'yellow';
    } else if (tablet.matches) {
        color = 'blue';
    }
    // Asignar color
    document.querySelector('body').style.backgroundColor = color;
  }

  mq();
  // Solo se asigna un evento, cuando la ventana cambia de tamaño
  window.addEventListener('resize', mq);
});
<!DOCTYPE html>
<html>
<head>
    <title>Media Query con Javascript</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width"/>
</head>
<body>
<!-- Practicamente no hay nada -->
</body>
</html>

Este fragmento de código funciona en Firefox 82 / Windows 10.

1
  • recien veo tu respuesta y es increible como a 40 lineas de codigo (lo que yo escribi), puedas recudirlas a 24 lineas de codigo con comentarios incluidos (lo que escribiste y mejoraste), gracias por ayudarme a optimizar mi codigo !
    – Husdady
    el 9 nov. 2020 a las 2:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.