Enquire.js無法處理頁面加載，僅在屏幕<= 480px時有效

Question

所以我使用Enquire.js為我的網站添加和刪除bootstrap的預定義css類。 這是我有的：

一些引導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> 

問題：

我遇到的問題是， 只要屏幕尺寸減小到480px或更低 ，enquire.js代碼就會啟動 。

因此，當首次加載網站時，調整大小代碼將無法工作，直到我實際手動將其調整為480px或更低，然后您可以看到調整大小發生。

您可以在這里查看該網站

Answer 1

unmatch函數僅在從匹配狀態變為不匹配狀態時才起作用。

我想你也想使用設置功能。 這將在調用處理程序時運行javascript。 這是來自enquire.js網站的四個主要調用

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

});

Answer 2

我想您可能需要准備好文檔中的代碼。 這里使用jQuery：

<script type="text/javascript">

    $(function() {

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

        });

    });

</script>