Twitter Bootstrap JavaScript仅用于特定分辨率

Question

使用twitter-bootstrap，可以通过将css应用于visible-lg visible-md visible-sm responsive-utilities之类的标记来实现响应行为。

但是如果我想为特定分辨率应用特定的JavaScript呢。

让我说我有这样的javascript：

$('.mainHeader').affix({
        offset: {
            top: 585
        }
    }); 

我希望值top根据当前分辨率制作动态。 如果当前分辨率为visible-lg我想要top: 20，如果当前分辨率为visible-md，我想要top: 300等等。

有没有聪明的方法来实现twitter-bootstrap？

Answer 1

您可以使用matchMedia API检测特定的屏幕宽度，这样就可以执行此操作

if ( window.matchMedia('(min-width: 768px)').matches ) {
    $(element).affix({
        offset: {
            top: 585
        }
    });
} else if ( window.matchMedia('(min-width: 992px)').matches ) {
    // change the affix offset
}

需要知道IE10 + reference仅支持matchMedia API。另一种选择是 Modernizr mq()功能。阅读documentation here to learn more。