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 } }) } }