什么匹配媒体(“(最小宽度：500px)”).addListener(foo);做？那就是addListener()函数在这里做什么？当视口宽度改变时,它是否执行函数foo()？

解决方法:

是的,它执行foo功能

when the media query’s evaluated result changes.

(自MDN起)

在您的情况下,这意味着如果您从宽度大于500px的窗口开始,然后将其大小调整为小于500px,则该函数将执行.如果稍后将其重新调整为宽度大于500px,则该函数将再次执行.

使用MediaQueryListEvent作为第一个参数调用该函数.它包含boolean matches属性,表示您的媒体查询当前是否与视口匹配.