window.matchMedia 3个间隔

Question

I need for my web 3 intervals of matchMedia in javascript. I tried to use this:

if (matchMedia) {
var m1 = window.matchMedia("(max-width:640px)");
var m2 = window.matchMedia("(max-width:1024)");
m1.addListener(WidthChange);
m2.addListener(WidthChange);
WidthChange(m1,m2);
                }

                function WidthChange(m1,m2) {

                      if(m1.matches) {
                        console.log('ok1')
                      }else if(m2.matches){
                        console.log('ok2')
                      }else{
                        console.log('ok3')
                      }

it doesnt work. How do I have to modify it? Thanks for any help!

Answer 1

I think you're just missing the "px" from:

var m2 = window.matchMedia("(max-width:1024)");

Also you don't want to declare m1 and m2 as the arguments to WidthChange , because that will override the m1 and m2 variables that you declared above. The argument to WidthChange will actually be a MediaQueryListEvent , which you're not using in your callback. So just declare it like this:

function WidthChange() {