## 一、概述 enquire.js 是輕量級，純 JavaScript 實現的 CSS 媒體查詢庫； ## 二、安裝 ``` npm install enquire.js ``` ## 三、API ``` enquire.register(mediaQuery, handler) mediaQuery: 字符串，需要響應的媒體。 handler: 函數或對象， ``` ``` enquire.unregister(mediaQuery[, handler]) mediaQuery: 字符串，需要注銷響應的媒體。 handler: 函數或對象，可不寫，一旦寫了，只有這個handler被注銷 ``` ## 四、應用 用register來注冊響應處理方法，當檢測到當前屏幕的尺寸信息后，觸發處理器； ``` enquire.register("screen and (max-width:45em)", { // OPTIONAL // If supplied, triggered when a media query matches. match : function() {}, // OPTIONAL // If supplied, triggered when the media query transitions // *from a matched state to an unmatched state*. unmatch : function() {}, // OPTIONAL // If supplied, triggered once, when the handler is registered. setup : function() {}, // OPTIONAL, defaults to false // If set to true, defers execution of the setup function // until the first time the media query is matched deferSetup : true, // OPTIONAL // If supplied, triggered when handler is unregistered. // Place cleanup code here destroy : function() {} }); ``` ## 五、實例 1、創建device.js ``` /** * @description:監控屏幕寬度 * @create: **/ import enquireJs from 'enquire.js' // 引入enquire.js export const DEVICE_TYPE = { DESKTOP: 'desktop', TABLET: 'tablet', MOBILE: 'mobile' } export const deviceEnquire = function (callback) { const matchDesktop = { match: () => { callback && callback(DEVICE_TYPE.DESKTOP) } } const matchLablet = { match: () => { callback && callback(DEVICE_TYPE.TABLET) } } const matchMobile = { match: () => { callback && callback(DEVICE_TYPE.MOBILE) } } /** * enquireJs.register(mediaQuery, handler). * mediaQuery: 字符串，需要響應的媒體。 * handler: 函數或對象。 * handler Object: * match: 函數。媒體匹配時的回調。 */ enquireJs .register('screen and (max-width: 576px)', matchMobile) // mobile: 寬度小于576px時判斷為mobile .register('screen and (min-width: 577px) and (max-width: 1299px)', matchLablet) // 寬度介于577px - 1299px 時判斷為平板電腦 .register('screen and (min-width: 1300px)', matchDesktop) // 寬度大于1300px時判斷為pc電腦 } ``` 2、在App.vue中加入 ``` mounted () { deviceEnquire(deviceType => { console.log('deviceType', deviceType) }) } ``` 3、可以將媒體的類型保存起來，就用到了Vuex；