TwitterBootstrap僅用於特定分辨率的JavaScript

通過twitter-bootstrap，可以通過將css應用於標記來實現響應行爲，例如visible-lgvisible-mdvisible-smresponsive-utilities。TwitterBootstrap僅用於特定分辨率的JavaScript

但是如果我想要爲特定分辨率應用特定的JavaScript，該怎麼辦。

可以說我有JavaScript的那樣：

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

我希望值top進行動態基於當前的分辨率。讓，說，如果當前的分辨率visible-lg我想top: 20如果當前的分辨率visible-md我想top: 300等。

有沒有什麼聰明的方式實現與Twitter的引導？

來源

2013-12-23 sreginogemoh

考慮使用[enquire.js]（http://wicky.nillia.ms/enquire.js/）。 – moonwave99

這可能會有所幫助[window width else if]（http://stackoverflow.com/questions/12083508/jquery-window-width-else-if-statement） – ilias

您可以使用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 
}

需要知道matchMedia API僅支持IE10 + reference。另一種可供選擇的方式是Modernizrmq()功能。閱讀documentation here to learn more。

來源

2013-12-23 03:49:47 Bobby

TwitterBootstrap僅用於特定分辨率的JavaScript

回答

相關問題