编辑:现在可以通过Bower和NPM使用此库。 有关详细信息,请参见github repo。
您可以使用最新版本(Responsive Bootstrap Toolkit 2.5.0)执行以下操作:
// Wrap everything in an IIFE(function($, viewport){ // Executes only in XS breakpoint if( viewport.is('xs') ) { // ... } // Executes in SM, MD and LG breakpoints if( viewport.is('>=sm') ) { // ... } // Executes in XS and SM breakpoints if( viewport.is('<md') ) { // ... } // Execute only after document has fully loaded $(document).ready(function() { if( viewport.is('xs') ) { // ... } }); // Execute pre each time window size changes $(window).resize( viewport.changed(function() { if( viewport.is('xs') ) { // ... } }) );})(jQuery, ResponsiveBootstrapToolkit);从2.3.0版开始,您不需要
<div>下面提到的四个元素。
原始答案:
我认为您不需要任何庞大的脚本或库。这是一个相当简单的任务。
在下面插入以下元素
</body>:
<div ></div><div ></div><div ></div><div ></div>
这4个div允许您检查当前活动的断点。为了方便地进行JS检测,请使用以下功能:
function isBreakpoint( alias ) { return $('.device-' + alias).is(':visible');}现在,仅在最小的断点上执行特定操作即可:
if( isBreakpoint('xs') ) { $('.someClass').css('property', 'value');}在DOM准备就绪后检测更改也非常简单。您需要的是一个像这样的轻量级窗口调整大小侦听器:
var waitForFinalEvent = function () { var b = {}; return function (c, d, a) { a || (a = "I am a banana!"); b[a] && clearTimeout(b[a]); b[a] = setTimeout(c, d) } }();var fullDateString = new Date();一旦配备了它,就可以开始侦听更改并执行特定于断点的功能,如下所示:
$(window).resize(function () { waitForFinalEvent(function(){ if( isBreakpoint('xs') ) { $('.someClass').css('property', 'value'); } }, 300, fullDateString.getTime())});


