2

所以我使用 Enquire.js 为我的网站添加和删除引导程序的预定义 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>

问题：

我遇到的问题是 enquire.js 代码只有在屏幕尺寸减小到 480px 或更少时才会启动。

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

你可以看看这里的网站

4

2 回答 2

5

不匹配功能仅在从匹配状态变为不匹配状态时才起作用。

我想你也想使用设置功能。这将在调用处理程序时运行内部的 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() {}

});
于 2014-07-26T18:02:29.710 回答
3

我认为您可能需要准备好文档中的代码。这里使用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>
于 2014-07-26T17:43:03.363 回答