用户登录

页底里面有这些列表内容,我想让它们在小尺寸的设备上用手风琴的形式展示出来 ... 配置这个手风琴我需要一点 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 方法里添加的行为 ...

页底:JavaScript 媒体查询《 网页设计案例:页底 》

统计

13198
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点