Media queries + Javascript

Bonjour,

J'ai une question existentielle sur les media queries en javascript depuis quelques jours. J'ai mis un bout de code sur codepen pour que ce soit plus simple à comprendre ... Tous mes test sont réalisés sur Chrome ou FF en navigation vue adaptative (ou toggle device toolbar).

(je tiens à préciser que je ne suis pas un pro de la programmation javascript, j'ai fait deux fonctions différentes pour surveiller les deux div, je ne sais pas passer en paramètre l'élément pour n'avoir qu'une fonction par exemple ... mais bon, ça fonctionne pour l'exemple, c'est le principal !)

https://codepen.io/lbarbado/pen/jBNMgo

donc le principe, il y a deux div, vous pouvez définir deux média queries, une pour chaque div. Si la condition est remplie la div est verte, sinon elle est rouge. Jusque là c'est plutôt simple

donc une media querie au hasard : max-width:768px pour la première div et min-width:768px

le fonctionnement normal des media queries est jusqu'à la valeur incluse (inférieur ou égal, max-width) ou à partir de la valeur incluse (supérieur ou égal, min-width)

le résultat attendu, à 768px, les deux sont vertes, à 767px la div2 passe en rouge, à 769px le div1 passe en rouge. Jusque là tout va bien ...

Autre media querie, au hasard toujours : max-width:767px pour la première div et min-width:767px

résultat attendu : à 767px les deux div sont vertes ... et là patatra ! à 767px, la div1 est rouge et la div2 est verte ... comprends pas ! c'est peut être quelque chose de connu...

voili voilou le questionnement du jour...
Merci !
Modifié par lobarbad (22 Feb 2017 - 14:15)

Perso j'ai mis max-width:767px pour la première div et min-width:767px
les deux div sont vertes, mais la deuxième div est verte UNIQUEMENT à 767px, si c'est plus ou si c'est moins elle devient rouge :s