[javascript] JavaScript를 사용하여 Twitter Bootstrap 3의 반응 형 중단 점을 감지하는 방법은 무엇입니까?

편집 :이 라이브러리는 이제 Bower 및 NPM을 통해 사용할 수 있습니다. 자세한 내용은 github repo를 참조하십시오.

업데이트 된 답변 :

• 라이브 예 : CodePen
• 최신 버전: Github 리포지토리
• 부트 스트랩을 좋아하지 않습니까? 확인 : 기초 데모 및 사용자 정의 프레임 워크 데모
• 문제가있다? 이슈를 엽니 다

면책 조항 : 나는 저자입니다.

최신 버전 (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>아래 언급 된 네 가지 요소 가 필요하지 않습니다 .

원래 답변 :

나는 당신이 그것을 위해 거대한 스크립트 나 라이브러리가 필요하다고 생각하지 않습니다. 상당히 간단한 작업입니다.

바로 다음 요소를 삽입하십시오 </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())
});

답변

if ($(window).width() < 768) {
    // do something for small screens
}
else if ($(window).width() >= 768 &&  $(window).width() <= 992) {
    // do something for medium screens
}
else if ($(window).width() > 992 &&  $(window).width() <= 1200) {
    // do something for big screens
}
else  {
    // do something for huge screens
}

Response.resize(function() {
    if ( Response.band(1200) )
    {
       // 1200+
    }
    else if ( Response.band(992) )
    {
        // 992+
    }
    else if ( Response.band(768) )
    {
        // 768+
    }
    else
    {
        // 0->768
    }
});

angular
    .module('components.responsiveDetection', [])
    .factory('ResponsiveDetection', function ($window) {
        return {
            getBreakpoint: function () {
                var w = $window.innerWidth;
                if (w < 768) {
                    return 'xs';
                } else if (w < 992) {
                    return 'sm';
                } else if (w < 1200) {
                    return 'md';
                } else {
                    return 'lg';
                }
            }
        };
    });

/**
 * Detect the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
        env = Object.keys(envs)[i];
        $el.addClass(envs[env]);
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
};

/**
 * Detect and return the current active responsive breakpoint in Bootstrap
 * @returns {string}
 * @author farside {@link https://stackoverflow.com/users/4354249/farside}
 */
function getResponsiveBreakpoint() {
    var envs = ["xs", "sm", "md", "lg"];
    var env = "";

    var $el = $("<div>");
    $el.appendTo($("body"));

    for (var i = envs.length - 1; i >= 0; i--) {
        env = envs[i];
        $el.addClass("d-" + env + "-none");;
        if ($el.is(":hidden")) {
            break; // env detected
        }
    }
    $el.remove();
    return env;
}

function getBootstrapBreakpoint(){
    var w = $(document).innerWidth();
    return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}

function getBootstrapBreakpoint(){
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}

Response.create({
    prop : "width",
    breakpoints : [1200, 992, 768, 480, 320, 0]
});

Response.crossover('width', function() {
    if (Response.band(1200)) {
        // 1200+

    } else if (Response.band(992)) {
        // 992+

    } else if (Response.band(768)) {
        // 768+

    } else if (Response.band(480)) {
        //480+

    } else {
        // 0->320

    }
});

Response.ready(function() {
    $(window).trigger('resize');
});