javascript - Enquire.js 在页面加载时不起作用，仅在屏幕 <= 480px 时起作用

Question

所以我使用 Enquire.js 为我的网站添加和删除 Bootstrap 的预定义 css 类。这是我所拥有的:

一些 bootstrap HTML 缩略图:

<div class="row">
  <div class="thumb thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
  <div id ="thumb" class="thumb col-xs-12 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." class="img-rounded img-responsive" alt="...">
    </a>
  </div>
</div>

我已经设置了 enquire.js 以便缩略图大小根据屏幕大小调整大小:

<script type="text/javascript">

var $info = $('.thumb');

    enquire.register("(max-width: 480px)", {

    match: function() {      
        $info.removeClass('col-xs-6');
        $info.addClass('col-xs-12');
    },


    unmatch: function() {
         $info.removeClass('col-xs-12');
         $info.addClass('col-xs-6');      
    }

    }).listen();

</script> 

问题:

我遇到的问题是 enquire.js 代码仅在屏幕尺寸减小到 480 像素或更小时才启动。

因此，当网站首次加载时，调整大小代码将不起作用，直到我手动将其大小调整为 480 像素或更低，然后您才能看到调整大小发生。

你可以看看这个网站here

Answer 1

unmatch 函数只有在从匹配状态变为不匹配状态时才会起作用。

我认为您也想使用设置 功能。这将在调用处理程序时在内部运行 javascript。这些是来自 enquire.js site 的四个主要调用

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

});