在前端开发中，响应式设计是必不可少的。enquire.js 是一个轻量级的 JavaScript 库，用于检测媒体查询并在条件匹配时运行回调函数。它可以帮助我们根据不同屏幕大小和设备类型来优化网站的用户体验。
安装
安装 enquire.js 可以使用 npm 或者 yarn：
npm install enquire.js --save # or yarn add enquire.js
使用方法
引入 enquire.js
在需要使用 enquire.js 的文件中引入该库：
import enquire from 'enquire.js';
匹配条件
通过 enquire.register() 方法来注册一个匹配条件和相关的回调函数。比如，在屏幕宽度小于 768px 时，我们需要隐藏一个元素，可以这样写：
-- -------------------- ---- -------
------------------------ --- ----------- -------- -
------ ---------- -
-- -- --------- ---- -------
------------------------------------------------ - -------
--
-------- ---------- -
-- -- --------- ---- ---------
------------------------------------------------ - --------
-
---这里的第一个参数 'screen and (max-width: 767px)' 是一个媒体查询条件，表示屏幕宽度小于 768px。第二个参数是一个对象，包括两个属性：match 和 unmatch。当条件匹配时，会执行 match 中的回调函数；当条件不匹配时，会执行 unmatch 中的回调函数。
取消注册
如果要取消之前注册的条件和回调函数，可以使用 enquire.unregister() 方法。例如：
-- -------------------- ---- -------
----- ------- - -
------ ---------- -
-- -- --------- ---- -------
--
--
------------------------ --- ----------- -------- ---------
-- ----- -----
-------------------------- --- ----------- -------- ---------销毁实例
如果你不再需要 enquire.js 实例，可以使用 enquire.destroy() 方法来销毁它。这将删除所有已注册的条件和回调函数，并释放内存。例如：
const enq = enquire.register('screen and (max-width: 767px)', {
match: function() {
// do something when matched
},
});
// later on...
enq.destroy();示例代码
下面是一个完整的示例，它在屏幕宽度小于 768px 时隐藏一个元素，在屏幕宽度大于等于 768px 时显示该元素：
<div id="element">Hello world!</div>
-- -------------------- ---- -------
------ ------- ---- -------------
------------------------ --- ----------- -------- -
------ ---------- -
-- -- --------- ---- -------
------------------------------------------------ - -------
--
-------- ---------- -
-- -- --------- ---- ---------
------------------------------------------------ - --------
-
---总结
enquire.js 是一个非常实用的 JavaScript 库，在响应式设计中有很多应用场景。本文介绍了 enquire.js 的基本使用方法，包括注册条件和回调函数、取消注册和销毁实例等操作。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33766