所以我使用 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
最佳答案
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() {}
});
关于javascript - Enquire.js 在页面加载时不起作用,仅在屏幕 <= 480px 时起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24971699/