页底里面有这些列表内容，我想让它们在小尺寸的设备上用手风琴的形式展示出来 ... 配置这个手风琴我需要一点 JavaScript ... 这些 JavaScript 我需要应用在特定的媒体特性上 ..

这里我们可以使用一个脚本库 ... 可以使用 npm 或者 yarn，把它添加到我们的项目上 ..

在项目的根目录下面执行一下

yarn add enquire.js

安装的东西，你可以在项目下面的 node_modules 目录下面找到 ...

在这个 enquire.js 下面，有个 dist 目录，dist 表示的是 distribution .. 发行版 ... 它下面有我们需要用的这个脚本 ...

我配置了项目用的服务器，你可以直接链接在 node_modules 目录下的资源 ...

把这个脚本放在页面的底部去加载 ... enquire.js/dist/enquire.min.js

然后再去用一下这个库 .. 打开项目的自定义脚本文字 ... 在 app .. scripts 下面，打开 main.js ...

先添加一段注释 .. /** bottom

使用 enquire 的 register 这个方法，去注册一个媒体查询 ... screen and (max-width: 767px)

它的第二个参数是一个对象 ... 在这个对象里面，你可以定义几个方法，这些方法可以在不同的阶段被执行 ...

比如在匹配注册的这个媒体查询的时候，会执行 match 方法 ... 添加一个这样的方法 ... 方法里面先简单的做点事，主要是去验证一下我们用 JavaScript 注册的媒体查询是不是有效 ..

用一个 console.log ... 在浏览器的控制台上输出点文字 ... 匹配 ..

不匹配注册的媒体查询也可以做点事 ... 添加一个 unmatch() {} 方法 ...

在控制台上输出一个 不匹配 ...

回到浏览器 ... 去预览一下 ... 打开浏览器的控制台 ...

缩小一下窗口的尺寸 ... 小于 767 像素以后，控制台上会显示一个 匹配 ...

再调整一下 ... 窗口大于 767 像素以后，会执行我们注册的媒体查询里的 unmatch 方法里添加的行为 ...