3个时间间隔的window.matchMedia

Question

我需要为我的网页在javascript的matchMedia的3个间隔。我试着使用这个：

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')
                      }

它不起作用。我该怎么修改它？谢谢你的帮助！

Answer 1

我想你只是错过了下面的"px“：

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

此外，您也不希望将m1和m2声明为WidthChange的参数，因为这会覆盖上面声明的m1和m2变量。WidthChange的参数实际上是一个MediaQueryListEvent，您不会在回调中使用它。所以就像这样声明它：

function WidthChange() {