关于前端:学习笔记MediaQueryList

window.matchMedia 办法

window.matchMedia 办法返回一个 MediaQueryList 对象。window.matchMedia 承受 媒体查问字符串 作为参数。

const mql1 = window.matchMedia('(max-width: 600px)');const mql2 = window.matchMedia('(min-width: 400px) and (max-width: 800px)');

MediaQueryList 对象

属性 matches

返回一个 boolean 值。判断以后的 document 是否匹配 媒体查问字符串。匹配返回 true。否则返回 false。

const mql = window.matchMedia('(max-width: 600px)');mql.matches

不匹配 媒体查问字符串

匹配 媒体查问字符串

属性 media

返回 媒体查问字符串

const mql = window.matchMedia('(min-width: 400px) and (max-width: 800px)');// "(min-width: 400px) and (max-width: 800px)"mql.media

办法 addListener

为 MediaQueryList 对象增加一个监听器。

const mql = window.matchMedia('(min-width: 400px) and (max-width: 800px)');const callback = function () {    if (mql.matches) {        console.log('匹配')    } else {        console.log('不匹配')    }}mql.addListener(callback)

只有当 mql。matches 发生变化的时候, callback 才会调用。如果想要一开始就执行逻辑。能够手动的调用一遍 callback

const mql = window.matchMedia('(min-width: 400px) and (max-width: 800px)');const callback = function () {    if (mql.matches) {        console.log('匹配')    } else {        console.log('不匹配')    }}callback()mql.addListener(callback)

办法 removeListener

用于移除监听器

const mql = window.matchMedia('(min-width: 400px) and (max-width: 800px)');const callback = function () {    if (mql.matches) {        console.log('匹配')    } else {        console.log('不匹配')    }}mql.addListener(callback)mql.removeListener(callback)

参考

• Window.matchMedia
• MediaQueryList