轻量，没有依赖。
安装： npm install enquire.js
API:
enquire.register(mediaQuery, handler).
mediaQuery: 字符串，需要响应的媒体。
handler: 函数或对象，
enquire.unregister(mediaQuery[, handler])
mediaQuery: 字符串，需要注销响应的媒体。
handler: 函数或对象，可不写，一旦写了，只有这个handler被注销
handler Object:
destory: 当handler是unregister状态时响应。
deferSetup: 布尔值。默认false,设置为true时，推迟执行setup里的回调，直到第一次match时才执行。
setup: 函数。
一般情况下，如果当match时需要请求数据，改变UI。变成unmatch不需要显示UI,再变回match,又要再一次请求数据,显示UI,请求数据就会有很多次。setup的存在就是让数据只需要请求一次，将数据与UI的显示分离开来。即在setup中请求数据,在match中显示UI,setup的回调是只会执行一次的。
match: 函数。媒体匹配时的回调。
unmatch: 函数。媒体不匹配时的回调。
主要使用的方法为 register。
enquire.register('screen and (max-width: 45em)', { // 以下为使用的五种选择 // 当媒体查询与上述匹配时，即当窗口宽度小于45em时的响应 match: function() {}, // 当窗口从匹配调整到不匹配以后的响应 unmatch: function() {}, // 只会响应一次，when the handler is registered? setup: function() {}, // 默认为false,一旦被设置为true,defers execution of the setup function until the first time the media query is matched deferSetup: true, destroy: function() {}, // triggered when handler is unregistered. Place cleanup code here destroy: function() {}, });
inquire允许在register中有多个处理程序，
// 可以把各种回调放在一个数组中 enquire.register('screen and min-width: 45em', [ { match: function() { console.log('handler 1 matched'); } }, { match: function() { console.log('handler 2 matched'); } } ]); // 或者用以下的方式 const query = 'screen and (min-width: 45em)'; enquire.register(query, function() { console.log('handler 3 matched'); }); enquire.register(query, function() { console.log('handler 4 matched'); }); ...
当存在很多种不同的屏幕宽度，每种宽度需要不同的布局时，
enquire .register('screen and (max-width: 50em)', function() { // handler 1 matched }); .register('screen and (max-width: 40em)', function() { // handler 2 matched });
取消注册处理程序，
enquire提供了unregister方法去取消register，
const query1 = 'screen and (min-width: 40em)'; const query2 = 'screen and (min-width: 5oem)'; const handler1 = { match: function() {}, destory: function() { console.log('handler 1 destoryed'); }, }; const handler2 = { match: function() {}, unmatch: function() { console.log('handler 2 unmatched'); } }; enquire.register(query1, handler1); enquire.unregister(query1); // 'handler 1 destoryed' enquire.register(query2, handler2); enquire.unregister(query2, handler2); // 'handler 2 unmatched'
当unregister只有一个参数query时，匹配该query的handler将会全部被注销，即是说不再会有关于该query的任何操作和响应。
当unregister有两个参数query和handler时，注销指定query的指定handler。
当handler内有destory时执行destory内的回调，没有destory时，执行unmatch。
在项目中，通过match和unmatch去改变组件的状态，以控制组件是否显示或以怎样的形式显示来达到响应式布局。
转载：https://www.cnblogs.com/holajulie/p/7891354.html
