「学习笔记」MediaQueryList 「学习笔记」MediaQueryList

window.matchMedia 方法 【「学习笔记」MediaQueryList】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)

参考