javascript中的多媒体查询

我试图用Javascript检查屏幕大小。 我的元素将根据屏幕大小设置不同的动画

我想我离结果不太远，但我还没有完全理解它

加载页面时，无论窗口大小，都会显示两次console.log

通过手动缩小窗口，拖动鼠标，可以： -2当MD的大小正常时，console.log（'MD'） -1 console.log（'SM'）当SM的大小正常时

通过手动扩大窗口，拖动鼠标，可以： -1 console.log（'MD'），当MD的大小正常时 -1当LG的大小正常时，console.log（'SM'） -1当LG的大小正常时，控制台日志（'LG'）

但是通过使用浏览器图标调整窗口的大小，我的console.log就如我所愿了

有可能有更多的解释吗

我希望我已经说清楚了

让mqls=[
window.matchMedia（'屏幕和（最小宽度：768px）和（最大宽度：991px'），
window.matchMedia（'屏幕和（最小宽度：992px）'）
];
功能测试（mql）{
如果（mqls[0]。匹配项）{
console.log（'MD'）
}
else if（mqls[1]。匹配项）{
console.log（'LG'）
}
else如果（！mqls[0]。匹配&&！mqls[1]。匹配）{
console.log（'SM'）
}
}
for（设i=0；i

功能检查屏幕（）{
const checkMobile=window.matchMedia（'屏幕和（最大宽度：575px）'）；
const checktable=window.matchMedia（'屏幕和（最小宽度：576px）和（最大宽度：991px）'；
const checkDesktop=window.matchMedia（'screen and（最小宽度：992px））；
checkMobile.addListener（函数（e）{
如果（如匹配）{
console.log（'MOBILE'）；
}
});
checkTablet.addListener（函数（e）{
如果（如匹配）{
console.log（“平板电脑”）；
}
});
checkDesktop.addListener（函数（e）{
如果（如匹配）{
console.log（'DESKTOP'）；
}
});
}
检查屏幕（）

功能检查屏幕（）{
const checkMobile=window.matchMedia（'屏幕和（最大宽度：575px）'）；
const checktable=window.matchMedia（'屏幕和（最小宽度：576px）和（最大宽度：991px）'；
const checkDesktop=window.matchMedia（'screen and（最小宽度：992px））；
checkMobile.addListener（函数（e）{
如果（如匹配）{
console.log（'MOBILE'）；
}
});
checkTablet.addListener（函数（e）{
如果（如匹配）{
console.log（“平板电脑”）；
}
});
checkDesktop.addListener（函数（e）{
如果（如匹配）{
console.log（'DESKTOP'）；
}
});
}
检查屏幕（）

该行为到底是什么让您感到困惑或意外？了解dev toolVariable

mqls

的输出是一个包含两个元素的数组，您制作了

for loop

来检查屏幕大小，因此根据

mqls

数组长度，控制台输出将是两倍。该行为究竟是什么让您感到困惑或者对您来说是意外的？了解dev toolVariable

mqls

的输出是一个包含两个元素的数组，您制作了

for loop

来检查屏幕大小，因此根据

mqls

数组长度，控制台输出将是两倍。