在前端开发中，响应式设计已经成为标配，而媒体查询是实现响应式设计的重要工具之一。matchmediaquery 是一个 npm 包，它可以让我们在 JavaScript 中更方便地使用媒体查询。本文就来详细介绍一下如何使用 matchmediaquery。
安装
使用 matchmediaquery 需要先安装它。在终端中输入以下命令即可：
npm install matchmediaquery
使用
在安装好 matchmediaquery 后，我们需要引入它。可以使用以下代码：
const matchMediaQuery = require('matchmediaquery');matchmediaquery 提供了一个 matches 方法，它可以用来判断当前窗口是否符合一个媒体查询。我们可以这样使用它：
const isSmallScreen = matchMediaQuery('(max-width: 767px)').matches;
if (isSmallScreen) {
// 对小屏幕的处理逻辑
} else {
// 对大屏幕的处理逻辑
}上面的代码会判断当前窗口的宽度是否小于等于 767 像素。如果符合条件，isSmallScreen 就会是 true，否则就是 false。
在上面的例子中，我们使用了一个字符串来表示媒体查询，但实际上也可以使用一个对象来表示：
const isSmallScreen = matchMediaQuery({ maxWidth: '767px' }).matches;深入理解
了解了基本用法后，我们来看一下 matchmediaquery 的深层实现。
matchmediaquery 实际上是对 window.matchMedia() 的封装。window.matchMedia() 是一个浏览器原生 API，它可以接受一个媒体查询字符串或对象，返回一个 MediaQueryList 对象。
MediaQueryList 对象有以下几个方法：
matches: 用来判断当前窗口是否符合该媒体查询。addListener(): 添加一个监听器，当窗口状态变化时会触发这个监听器。removeListener(): 移除一个监听器。
所以，我们可以用 window.matchMedia() 来判断当前窗口是否符合一个媒体查询：
const mediaQueryList = window.matchMedia('(max-width: 767px)');
const isSmallScreen = mediaQueryList.matches;
if (isSmallScreen) {
// 对小屏幕的处理逻辑
} else {
// 对大屏幕的处理逻辑
}matchmediaquery 就是在 window.matchMedia() 的基础上做了一些封装，让我们可以更方便地传入媒体查询。在 matchmediaquery 的源码中，它的实现是这样的：
-- -------------------- ---- ------- -------- --------------------------- - ----- ----------- - --------------- - ----- - --------------------------- ------ ------------------------------- - -------- -------------- - ----- -------------- - ---------------------------- ------ ----------------------- - -------------- - - -------- --
总结
matchmediaquery 是一个方便的 npm 包，它让我们可以更方便地使用媒体查询。我们可以使用它来判断当前窗口是否符合一个媒体查询，从而实现响应式设计。
在深入理解 matchmediaquery 的实现时，我们也了解了 window.matchMedia() 这个浏览器 API，以及 MediaQueryList 对象的一些方法。这对我们在开发中更深入地利用媒体查询会有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedacffb5cbfe1ea0610ba6