随着移动设备的普及，响应式设计成为了前端开发中不可或缺的一环。而 enquire.js 便是一个非常好用的 JavaScript 库，它可以帮助我们更加方便地实现响应式设计。
enquire.js 是一个小巧的 JavaScript 库， API 简单清晰，功能强大，可以方便实现针对不同设备尺寸的界面布局调整。快速、高效、易用是 enquire.js 的最大特点。
安装 enquire.js
安装 enquire.js 的方式非常简单，只需在项目中执行以下命令即可：
--- ------- ---------- ------
使用 enquire.js
enquire.js 最常用的 API 是 match 和 unmatch。match 用于匹配满足指定媒体查询条件的设备，unmatch 用于不匹配这些设备。
match 和 unmatch 支持两个参数。第一个参数是媒体查询，第二个参数是对象类型的回调函数。回调函数通常包含我们要在匹配和不匹配的条件下执行的代码。
以下是一个简单的示例代码，它将在更改浏览器宽度时，检测不同的设备尺寸并做出响应：
----- ------- - ----------------------
------------------------ --- ----------- -------- -
------ -------- -- -
-------------------
--
-------- -------- -- -
-------------------
-
---在代码中，我们先用 require() 导入 enquire.js。然后使用 enquire.register() 注册一个名为 "screen and (max-width: 767px)" 的媒体查询。在 match 回调函数中，打印出 "小屏幕"。在 unmatch 回调函数中，打印出 "大屏幕"。
其他 API
enquire.js 还有一些其他的 API，可以根据我们的需求来使用。下面是一些例子。
addListener 和 removeListener
这两个方法可以帮助我们添加和删除事件监听器，用法和浏览器原生的 addEventListener 和 removeEventListener 方法类似。
------------------------ --- ----------- -------- -
------ -------- -- -
-------------------
-
---
--------------------------- --- ----------- -------- -----------
-------------------
---
------------------------------ --- ----------- ---------在这个例子中，我们使用 addListener() 方法添加一个与 "screen and (max-width: 767px)" 媒体查询匹配的事件监听器。在回调函数中，输出 '匹配了'。使用 removeListener() 方法，我们可以删除刚刚添加的事件监听器。
setup
enquire.js 还提供了一个 setup 方法，可以用于在页面加载时初始化媒体查询。
------------------------ --- ----------- ------ --- ----------- --------- -
------ -------- -- -
--------------------
-
---
------------------------ --- ----------- --------- -
------ -------- -- -
-------------------
-
---
----------------在这个例子中，我们使用 enquire.register() 注册了两个媒体查询，然后使用 enquire.setup() 方法初始化他们。
总结
enquire.js 是一个非常实用的前端响应式设计库，可以帮助我们快速、方便地实现针对不同设备尺寸的响应式布局。
在本文中，我们介绍了 enquire.js 的基本使用，包括安装、注册、match 和 unmatch、addListener 和 removeListener 以及 setup 方法。了解这些内容，你将能够更加灵活地使用 enquire.js 来实现你想要的响应式设计。
我们推荐你去官网了解更多信息：http://wicky.nillia.ms/enquire.js/。祝你使用 enquire.js 能够愉快！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/164743