編集:このライブラリーは、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 code each time window size changes
$(window).resize(
viewport.changed(function() {
if( viewport.is('xs') ) {
// ...
}
})
);
})(jQuery, ResponsiveBootstrapToolkit);
バージョン2.3.0以降では、<div>
以下の4つの要素は必要ありません。
元の回答:
そのために巨大なスクリプトやライブラリは必要ないと思います。かなり簡単な作業です。
直前に次の要素を挿入します</body>
。
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></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())
});
<div class="d-none d-?-block"></div>
可視性の変化を検出できます(目的のブレークポイントを挿入します)。これらのCSSクラスはBootstrap 4用です。Bootstrap3で機能するものを使用してください。ウィンドウのサイズ変更イベントをリスニングするよりもはるかにパフォーマンスが高くなります。