enquire.js——非常好用的响应式媒体查询插件

css3为我们提供了很好的媒体查询：利用@media screen实现网页布局的自适应，而enquire.js是一个非常轻量级的纯js响应CSS媒体查询库。enquire.js是基于js的window.matchMedia()接口实现的更强的功能。它的使用方法非常简单，如：

1、DOM操作：
在屏幕宽度小于40em时，将.Post-content移动到侧边栏底部显示：

window.$ = document.querySelector.bind(document);
 
enquire.register("screen and (max-width:40em)", {
  match: function() {
    $(".Post-content").appendChild($(".Bio"));
  },
 
  unmatch: function() {
    $(".Sidebar").insertBefore($(".Bio"), $(".Sidebar").firstChild);
  }
});

这个是enquire.js的基本用法，其实用原生的window.matchMedia()接口实现如下：

window.$ = document.querySelector.bind(document);
 
(function() {
  var mq = window.matchMedia("(min-width:40em)");
  mq.addListener(positionBio);
  function positionBio(mediaQuery) {
    if (mediaQuery.matches) {
      $(".Sidebar").insertBefore($(".Bio"), $(".Sidebar").firstChild);
    } else {
      $(".Post-content").appendChild($(".Bio"));
    }
  }
 
  // On load
  positionBio(mq);
}());

2、利用enquire.js的setup()方法，根据视口的大小通过Ajax动态加载广告内容，setup()方法在执行enquire.register后立即运行一次：
js代码：

window.$ = document.querySelector.bind(document);
 
enquire.register("screen and (min-width:40em)", {
  deferSetup: true,
  setup: function() {
    this.ad = "";
    this.adContainer = $(".Ad");
    this.visibleClass = "is-visible";
    this.adUrl = "//codepen.io/damonbauer/pen/LVgxxN.html";
 
    reqwest({ url: this.adUrl, crossOrigin: true})
      .then(function(response) {
        this.ad = response;
      }.bind(this)).fail(function() {
        this.ad = "Ad could not be loaded.";
      }.bind(this)).always(function(response) {
        this.adContainer.innerHTML = this.ad;
      }.bind(this));
  },
 
  match: function() {
    this.adContainer.classList.add(this.visibleClass);
  },
 
  unmatch: function() {
    this.adContainer.classList.remove(this.visibleClass);
  }
});

css代码：

.Ad {
 display: none;
}
 
.is-visible {
 display: block;
}

3、页面增强
html代码：

<div id="Container">
  <div class="Item">...</div>
  <div class="Item">...</div>
  <div class="Item">...</div>
  ...
</div>

js代码：

enquire.register("screen and (min-width:30em)", {
  deferSetup: true,
 
  setup: function() {
    this.container = $( "#Container" );
  },
 
  match: function() {
    this.container.packery({
      itemSelector: '.Item'
    });
  },
 
  unmatch: function() {
    this.container.packery('destroy');
  }
});

4、在VUE中使用enquire.js
①、安装

cnpm install enquire.js --save

或

cnpm install enquire.js --save

②、创建device.js

import enquireJs from '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('screen and (max-width: 576px)', matchMobile)
    .register('screen and (min-width: 576px) and (max-width: 1199px)', matchLablet)
    .register('screen and (min-width: 1200px)', matchDesktop)
}

③、在vue页面中使用：

import { deviceEnquire, DEVICE_TYPE } from '@/utils/device'
export default {
    mounted () {
        deviceEnquire(deviceType => {
          switch (deviceType) {
            case DEVICE_TYPE.DESKTOP:
                //DESKTOP视口下执行的代码，如显示隐藏操作
                break
            case DEVICE_TYPE.TABLET:
                //TABLET视口下执行的代码，如显示隐藏操作
                 break
            case DEVICE_TYPE.MOBILE:
            default:
                //MOBILE视口下执行的代码，如显示隐藏操作
                break
          }
        })
    }
}