window.matchMedia方法window.matchMedia方法返回一个MediaQueryList对象。window.matchMedia接受媒体查询字符串作为参数。constmql1=window.matchMedia('(max-width:600px)');constmql2=window.matchMedia('(min-width:400px)and(max-width:800px)');MediaQueryList对象属性匹配返回一个布尔值。判断当前文档是否匹配媒体查询字符串。匹配返回真。否则返回假。constmql=window.matchMedia('(最大宽度:600px)');mql.matches不匹配媒体查询字符串匹配媒体查询字符串属性媒体返回媒体查询字符串constmql=window.matchMedia('(min-width:400px)and(max-width:800px)');//"(min-width:400px)和(max-width:800px)"mql.media方法addListener添加一个监听器到MediaQueryList对象。constmql=window.matchMedia('(min-width:400px)and(max-width:800px)');constcallback=function(){if(mql.matches){console.log('match')}else{console.log('不匹配')}}mql.addListener(callback)仅当mql.只有当比赛发生变化时才会调用回调。如果要执行一开始的逻辑。您可以手动调用回调constmql=window.matchMedia('(min-width:400px)and(max-width:800px)');constcallback=function(){if(mql.matches){console.log('match')}else{console.log('notmatch')}}callback()mql.addListener(callback)方法removeListener用于移除监听器constmql=window.matchMedia('(min-width:400px)and(max-width:800px)');constcallback=function(){if(mql.matches){console.log('match')}else{console.log('mismatch')}}mql.addListener(callback)mql.removeListener(callback)参考Window.matchMediaMediaQueryList
