Как определить ответные точки останова Twitter Bootstrap 3 с помощью JavaScript?

В настоящее время Twitter Bootstrap 3 имеет следующие ответные точки останова: 768 пикселей, 992 пикселей и 1200 пикселей, представляющие малые, средние и большие устройства соответственно.

Как я могу обнаружить эти точки останова с помощью JavaScript?

Я хотел бы прослушивать с помощью JavaScript все связанные события, запускаемые при смене экрана. И чтобы иметь возможность определять, предназначен ли экран для малых, средних или больших устройств.

Что-то уже сделано? Ваши предложения?

Изменить: эта библиотека теперь доступна через Bower и NPM. Подробнее см. Репозиторий github.

ОБНОВЛЕННЫЙ ОТВЕТ:

• Живой пример: CodePen
• Последняя версия: репозиторий Github
• Не нравится Bootstrap? Проверка: демо Foundation и пользовательские рамочные демки
• Иметь проблему? Открыть вопрос

Отказ от ответственности: я автор.

Вот несколько вещей, которые вы можете сделать с помощью последней версии (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 блока позволяют проверить текущую активную точку останова. Для легкого обнаружения 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
}

Изменить: я не понимаю, почему вам следует использовать другую библиотеку js, если вы можете сделать это только с помощью jQuery, уже включенного в ваш проект Bootstrap.

Обнаружение ответной точки останова Twitter Bootstrap 4.1.x с помощью JavaScript

V.4.0.0 Bootstrap (и последняя версия Bootstrap 4.1.x ) представили обновленные варианты сетки , так что старое понятие об обнаружении не может быть непосредственно применены (см инструкции по миграции ):

• smНиже добавлен новый уровень сетки 768pxдля более детального контроля. Теперь у нас есть xs, sm, md, lg, и xl;
• xs классы сетки были изменены, чтобы не требовать инфикс.

Я написал небольшую служебную функцию, которая учитывает обновленные имена классов сетки и новый уровень сетки:

/**
 * 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;
};

Обнаружение отзывчивой точки останова Bootstrap v4-beta с помощью JavaScript

Bootstrap v4-альфа и Bootstrap v4-бета имели различный подход к сетке контрольных точек, так вот в наследство способ достижения той же:

/**
 * 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;
}

Думаю, это было бы полезно, так как легко интегрируется в любой проект. Он использует собственные адаптивные классы отображения самого Bootstrap.

Вы смотрели Response.js? Он предназначен для такого рода вещей. Объедините Response.band и Response.resize.

http://responsejs.com/

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

Вы можете использовать размер окна и жестко запрограммировать точки останова. Использование Angular:

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';
                }
            }
        };
    });

Вот мое собственное простое решение:

jQuery:

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

VanillaJS:

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

Лучше использовать этот подход с Response.js . Триггеры Response.resize при каждом изменении размера окна, где кроссовер будет запускаться только при изменении точки останова

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');
});

Не должно возникнуть проблем с какой-либо ручной реализацией, такой как упомянутая @oozic.

Вот пара библиотек, на которые вы можете взглянуть:

• Response.js - плагин jQuery - использует атрибуты данных html, а также имеет js api.
• enquire.js - enquire.js - это легкая библиотека на чистом JavaScript для ответа на медиа-запросы CSS.
• SimpleStateManager - менеджер состояний javascript для адаптивных веб-сайтов. Он легкий, не имеет зависимостей.

Обратите внимание, что эти библиотеки предназначены для работы независимо от начальной загрузки, основы и т. Д. Вы можете настроить свои собственные точки останова и получать удовольствие.

Вы можете добавить это в свой проект начальной загрузки, чтобы визуально проверить активную точку останова.

    <script type='text/javascript'>

        $(document).ready(function () {

            var mode;

            $('<div class="mode-informer label-info" style="z-index:1000;position: fixed;bottom:10px;left:10px">%mode%</div>').appendTo('body');


            var checkMode = function () {

                if ($(window).width() < 768) {
                    return 'xs';
                }
                else if ($(window).width() >= 768 && $(window).width() < 992) {
                    return 'sm';
                }
                else if ($(window).width() >= 992 && $(window).width() < 1200) {
                    return 'md';
                }
                else {
                    return 'lg';
                }
            };

            var compareMode = function () {
                if (mode !== checkMode()) {
                    mode = checkMode();

                    $('.mode-informer').text(mode).animate({
                        bottom: '100'
                    }, 100, function () {
                        $('.mode-informer').animate({bottom: 10}, 100)
                    });
                }
            };

            $(window).on('resize', function () {
                compareMode()
            });

            compareMode();

        });

    </script>

Вот НАДО

Основываясь на ответе Мацея Гурбана (что фантастически ... если вам это нравится, пожалуйста, проголосуйте за его ответ). Если вы создаете службу для запроса, вы можете вернуть текущую активную службу с настройкой ниже. Это может полностью заменить другие библиотеки обнаружения точек останова (например, enquire.js, если вы добавите некоторые события). Обратите внимание, что я добавил контейнер с идентификатором к элементам DOM, чтобы ускорить обход DOM.

HTML

<div id="detect-breakpoints">
    <div class="breakpoint device-xs visible-xs"></div>
    <div class="breakpoint device-sm visible-sm"></div>
    <div class="breakpoint device-md visible-md"></div>
    <div class="breakpoint device-lg visible-lg"></div>
</div>

COFFEESCRIPT (AngularJS, но это легко конвертируется)

# this simple service allows us to query for the currently active breakpoint of our responsive app
myModule = angular.module('module').factory 'BreakpointService', ($log) ->

  # alias could be: xs, sm, md, lg or any over breakpoint grid prefix from Bootstrap 3
  isBreakpoint: (alias) ->
    return $('#detect-breakpoints .device-' + alias).is(':visible')

  # returns xs, sm, md, or lg
  getBreakpoint: ->
    currentBreakpoint = undefined
    $visibleElement = $('#detect-breakpoints .breakpoint:visible')
    breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']]
    # note: _. is the lodash library
    _.each breakpointStringsArray, (breakpoint) ->
      if $visibleElement.hasClass(breakpoint[0])
        currentBreakpoint = breakpoint[1]
    return currentBreakpoint

JAVASCRIPT (AngularJS)

var myModule;

myModule = angular.module('modules').factory('BreakpointService', function($log) {
  return {
    isBreakpoint: function(alias) {
      return $('#detect-breakpoints .device-' + alias).is(':visible');
    },
    getBreakpoint: function() {
      var $visibleElement, breakpointStringsArray, currentBreakpoint;
      currentBreakpoint = void 0;
      $visibleElement = $('#detect-breakpoints .breakpoint:visible');
      breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']];
      _.each(breakpointStringsArray, function(breakpoint) {
        if ($visibleElement.hasClass(breakpoint[0])) {
          currentBreakpoint = breakpoint[1];
        }
      });
      return currentBreakpoint;
    }
  };
});

Вместо использования $ (document) .width () вы должны установить правило CSS, которое предоставляет вам эту информацию.

Я просто написал статью, чтобы понять это точно. Смотрите здесь: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/

Почему бы просто не использовать jQuery для определения текущей ширины css класса контейнера начальной загрузки?

т.е. ..

if( parseInt($('#container').css('width')) > 1200 ){
  // do something for desktop screens
}

Вы также можете использовать $ (window) .resize (), чтобы ваш макет не «испачкал кровать», если кто-то изменит размер окна браузера.

Вместо того, чтобы многократно вставлять нижеследующее на каждую страницу ...

<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>

Просто используйте JavaScript для динамической вставки его на каждую страницу (обратите внимание, что я обновил его для работы с Bootstrap 3 с помощью .visible-*-block:

// Make it easy to detect screen sizes
var bootstrapSizes = ["xs", "sm", "md", "lg"];
for (var i = 0; i < bootstrapSizes.length; i++) {
    $("<div />", {
        class: 'device-' + bootstrapSizes[i] + ' visible-' + bootstrapSizes[i] + '-block'
    }).appendTo("body");
}

У меня недостаточно очков репутации для комментариев, но для тех, у кого возникают проблемы с получением статуса «неопознанного», когда они пытаются использовать ResponsiveToolKit Maciej Gurban, я также получал эту ошибку, пока не заметил, что Maciej фактически ссылается на инструментарий снизу страницу в его CodePen

Я попробовал это сделать, и вдруг это сработало! Итак, используйте ResponsiveToolkit, но разместите ссылки внизу страницы:

Я не знаю, почему это имеет значение, но это так.

Вот еще один способ определить текущее окно просмотра без указания размеров окна просмотра в вашем javascript.

Смотрите здесь фрагменты css и javascript: https://gist.github.com/steveh80/288a9a8bd4c3de16d799

После добавления этих фрагментов в файлы css и javascript вы можете определить текущее окно просмотра следующим образом:

viewport.is('xs') // returns boolean

Если вы хотите определить диапазон окна просмотра, используйте его так:

viewport.isEqualOrGreaterThan('sm') // returns true for sm, md and lg

CSS Bootstrap для .containerкласса выглядит так:

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Таким образом, это означает, что мы можем безопасно полагаться на jQuery('.container').css('width')обнаружение точек останова, не полагаясь на такие недостатки jQuery(window).width().

Мы можем написать такую ​​функцию:

function detectBreakpoint() {
    // Let's ensure we have at least 1 container in our pages.
    if (jQuery('.container').length == 0) {
        jQuery('body').append('<div class="container"></div>');
    }

    var cssWidth = jQuery('.container').css('width');

    if (cssWidth === '1170px') return 'lg';
    else if (cssWidth === '970px') return 'md';
    else if (cssWidth === '750px') return 'sm';

    return 'xs';
}

А затем проверьте это как

jQuery(document).ready(function() {
    jQuery(window).resize(function() {
        jQuery('p').html('current breakpoint is: ' + detectBreakpoint());
    });

    detectBreakpoint();
});

Используйте CSS :beforeи contentсвойство, чтобы распечатать состояние точки останова в, <span id="breakpoint-js">поэтому JavaScript просто должен прочитать эти данные, чтобы превратить их в переменную для использования в вашей функции.

(запустите фрагмент, чтобы увидеть пример)

ПРИМЕЧАНИЕ. Я добавил несколько строк CSS, чтобы использовать их <span>в качестве красного флажка в верхнем углу браузера. Просто не забудьте переключить его обратно, display:none;прежде чем публиковать свои материалы.

// initialize it with jquery when DOM is ready
$(document).on('ready', function() {
    getBootstrapBreakpoint();
});

// get bootstrap grid breakpoints
var theBreakpoint = 'xs'; // bootstrap336 default = mobile first
function getBootstrapBreakpoint(){
   theBreakpoint = window.getComputedStyle(document.querySelector('#breakpoint-js'),':before').getPropertyValue('content').replace(/['"]+/g, '');
   console.log('bootstrap grid breakpoint = ' + theBreakpoint);
}

#breakpoint-js {
  /* display: none; //comment this while developping. Switch back to display:NONE before commit */
  /* optional red flag layout */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  color: white;
  padding: 5px 10px;
  background-color: red;
  opacity: .7;
  /* end of optional red flag layout */
}
#breakpoint-js:before {
  content: 'xs'; /* default = mobile first */
}
@media screen and (min-width: 768px) {
  #breakpoint-js:before {
    content: 'sm';
  }
}
@media screen and (min-width: 992px) {
  #breakpoint-js:before {
    content: 'md';
  }
}
@media screen and (min-width: 1200px) {
  #breakpoint-js:before {
    content: 'lg';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <span id="breakpoint-js"></span>
  <div class="page-header">
    <h1>Bootstrap grid examples</h1>
    <p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
  </div>
</div>

Я сделал собственный метод jQuery для определения размера экрана Twitter Bootstrap. Вот:

// Screen size ID will be stored in this variable (global var for JS)
var CurrentBootstrapScreenSize = 'unknown';

$(document).ready(function () {

    // <div> objects for all screen sizes required for screen size detection.
    // These <div> is hidden for users eyes.
    var currentScreenSizeDetectorObjects = $('<div>').css({
            'position':'absolute',
            'top':'-200px'
        }).addClass('current-screen-size').append([
            $('<div>').addClass('device-xs visible-xs').html('&nbsp;'),
            $('<div>').addClass('device-sm visible-sm').html('&nbsp;'),
            $('<div>').addClass('device-md visible-md').html('&nbsp;'),
            $('<div>').addClass('device-lg visible-lg').html('&nbsp;')
        ]);

    // Attach <div> objects to <body>
    $('body').prepend(currentScreenSizeDetectorObjects);

    // Core method for detector
    function currentScreenSizeDetectorMethod() {
        $(currentScreenSizeDetectorObjects).find('div').each(function() {
            var className = $(this).attr('class');
            if($(this).is(':visible')) {
                if(String(className).match(/device-xs/)) CurrentBootstrapScreenSize = 'xs';
                else if(String(className).match(/device-sm/)) CurrentBootstrapScreenSize = 'sm';
                else if(String(className).match(/device-md/)) CurrentBootstrapScreenSize = 'md';
                else if(String(className).match(/device-lg/)) CurrentBootstrapScreenSize = 'lg';
                else CurrentBootstrapScreenSize = 'unknown';
            };
        })
        console.log('Current Bootstrap screen size is: '+CurrentBootstrapScreenSize);
        $('.CurrentBootstrapScreenSize').first().html('Bootstrap current screen size: <b>' + CurrentBootstrapScreenSize + '</b>' );
    }

    // Bind screen size and orientation change
    $(window).bind("resize orientationchange", function() {
        // Execute screen detection
        currentScreenSizeDetectorMethod();
    });

    // Execute screen detection on page initialize
    currentScreenSizeDetectorMethod();

});

JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/

JSFillde в качестве полноэкранного примера: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/

Для всех, кого это интересует, я написал определение точки останова на основе точек останова CSS с использованием TypeScript и Observables. сделать из него ES6 не очень сложно, если убрать типы. В моем примере я использую Sass, но это также легко удалить.

Вот мой JSFiddle: https://jsfiddle.net/StefanJelner/dorj184g/

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.7/Rx.min.js"></script>
<div id="result"></div>

SCSS:

body::before {
  content: 'xs';
  display: none;

  @media screen and (min-width: 480px) {
    content: 's';
  }

  @media screen and (min-width: 768px) {
    content: 'm';
  }

  @media screen and (min-width: 1024px) {
    content: 'l';
  }

  @media screen and (min-width: 1280px) {
    content: 'xl';
  }
}

Машинопись:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

class BreakpointChangeService {
    private breakpointChange$: BehaviorSubject<string>;

    constructor(): BehaviorSubject<string> {
        // initialize BehaviorSubject with the current content of the ::before pseudo element
        this.breakpointChange$ = new Rx.BehaviorSubject(this.getBreakpoint());

        // observe the window resize event, throttle it and combine it with the BehaviorSubject
        Rx.Observable
            .fromEvent(window, 'resize')
            .throttleTime(0, Rx.Scheduler.animationFrame)
            .withLatestFrom(this.breakpointChange$)
            .subscribe(this.update.bind(this))
        ;

        return this.breakpointChange$;
    }

    // method to get the content of the ::before pseudo element
    private getBreakpoint(): string {
        // see https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
        return window.getComputedStyle(document.body, ':before').getPropertyValue('content').replace(/[\"\']/g, '');
    }

    private update(_, recent): void {
        var current = this.getBreakpoint();
        if(recent !== current) { this.breakpointChange$.next(current); }
    }
}

// if the breakpoint changes, react on it
var $result = document.getElementById('result');
new BreakpointChangeService().subscribe(breakpoint => {
    $result.innerHTML = Date.now()+': '+breakpoint;
});

Надеюсь, это кому-нибудь поможет.

Bootstrap4 с jQuery, упрощенное решение

<div class="device-sm d-sm-none"></div>
<div class="device-md d-md-none"></div>
<div class="device-lg d-lg-none"></div>
<div class="device-xl d-xl-none"></div>
<script>
var size = $('.device-xl').is(':hidden') ? 'xl' : ($('.device-lg').is(':hidden') ? 'lg'
    : ($('.device-md').is(':hidden') ? 'md': ($('.device-sm').is(':hidden') ? 'sm' : 'xs')));
alert(size);
</script>

Я не был удовлетворен полученными ответами, которые кажутся мне слишком сложными для использования, поэтому я написал свое собственное решение. Однако на данный момент это зависит от подчеркивания / lodash.

https://github.com/LeShrimp/GridSizeEvents

Вы можете использовать это так:

GridSizeEvents.addListener(function (newSize, oldSize) {
    // Will output eg. "xs -> sm"
    console.log(oldSize + ' -> ' + newSize);
});

Это работает из коробки для Bootstrap 3, так как точки останова жестко запрограммированы на 768 пикселей, 992 пикселей и 1200 пикселей. Для других версий вы можете легко адаптировать код.

Внутренне это использует matchMedia () и, таким образом, должно гарантировать получение результатов, синхронизированных с Bootstrap.

Возможно, это поможет некоторым из вас, но есть плагин, который поможет вам определить, на какой текущей точке останова Bootstrap v4 вы видите: https://www.npmjs.com/package/bs-breakpoints

Простой в использовании (можно использовать с jQuery или без него):

$(document).ready(function() {
  bsBreakpoints.init()
  console.warn(bsBreakpoint.getCurrentBreakpoint())

  $(window).on('new.bs.breakpoint', function (event) {
    console.warn(event.breakpoint)
  })
})

Вот мое решение (Bootstrap 4):

<div class="alert alert-warning row">
    <div class="col">
        Bootstrap breakpoint is
    </div>
    <div class="col">
        <div class="d-block d-sm-none">
            XS
        </div>
        <div class="d-none d-sm-block d-md-none">
            SM
        </div>
        <div class="d-none d-md-block d-lg-none">
            MD
        </div>
        <div class="d-none d-lg-block d-xl-none">
            MD
        </div>
        <div class="d-none d-xl-block">
            MD
        </div>
    </div>
</div>

Для всех, кто использует knockout.js , мне нужны наблюдаемые свойства knockout.js, которые сообщали бы мне, когда достигаются точки останова. Я решил использовать поддержку Modernizr для медиа-запросов в стиле css, чтобы числа соответствовали определениям начальной загрузки, и чтобы получить преимущества совместимости modernizr. Моя модель представления нокаутом выглядит следующим образом:

var viewModel = function() {
    // depends on jquery, Modernizr
    var self = this;
    self.widthXsOrLess = ko.observable();
    self.widthSmOrLess = ko.observable();
    self.widthMdOrLess = ko.observable();
    var setWindowSizeVars = function() {
        self.widthXsOrLess(!Modernizr.mq('(min-width: 768px)'));
        self.widthSmOrLess(!Modernizr.mq('(min-width: 992px)'));
        self.widthMdOrLess(!Modernizr.mq('(min-width: 1200px)'));
    };
    $(window).resize(setWindowSizeVars);
    setWindowSizeVars();
};

Вот хороший способ обнаружить это (может быть, забавно, но работает), и вы можете использовать необходимый элемент, чтобы код был понятным:

Пример: css:

@media (max-width: 768px) {
    #someElement
    {
         background: pink
    }
}

и в документе jQuery:

if($('#someElement').css('background') == 'pink')
{
    doWhatYouNeed();
}

конечно свойство css есть любое.

Поскольку скоро выйдет bootstrap 4, я подумал, что поделюсь функцией, которая его поддерживает (теперь это xl) и выполняет минимальный jQuery для выполнения работы.

/**
 * Get the Bootstrap device size
 * @returns {string|boolean} xs|sm|md|lg|xl on success, otherwise false if Bootstrap is not working or installed
 */
function findBootstrapEnvironment() {
    var environments = ['xs', 'sm', 'md', 'lg', 'xl'];
    var $el = $('<span />');
    $el.appendTo($('body'));
    for (var i = environments.length - 1; i >= 0; i--) {
        var env = environments[i];
        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env;
        }
    }
    $el.remove();
    return false;
}

Бутстрап 4

setResponsiveDivs();

function setResponsiveDivs() {
    var data = [
        {id: 'visible-xs', class: 'd-block d-sm-none'},
        {id: 'visible-sm', class: 'd-none d-sm-block d-md-none'},
        {id: 'visible-md', class: 'd-none d-md-block d-lg-none'},
        {id: 'visible-lg', class: 'd-none d-lg-block d-xl-none'},
        {id: 'visible-xl', class: 'd-none d-xl-block'}
    ];

    for (var i = 0; i < data.length; i++) {
        var el = document.createElement("div");
        el.setAttribute('id', data[i].id);
        el.setAttribute('class', data[i].class);
        document.getElementsByTagName('body')[0].appendChild(el);
    }
}

function isVisible(type) {
    return window.getComputedStyle(document.getElementById('visible-' + type), null).getPropertyValue('display') === 'block';
}

// then, at some point
window.onresize = function() {
    console.log(isVisible('xs') === true ? 'xs' : '');
    console.log(isVisible('sm') === true ? 'sm' : '');
    console.log(isVisible('md') === true ? 'md' : '');
    console.log(isVisible('lg') === true ? 'lg' : '');
    console.log(isVisible('xl') === true ? 'xl' : '');
};

или минифицированный

function setResponsiveDivs(){for(var e=[{id:"visible-xs","class":"d-block d-sm-none"},{id:"visible-sm","class":"d-none d-sm-block d-md-none"},{id:"visible-md","class":"d-none d-md-block d-lg-none"},{id:"visible-lg","class":"d-none d-lg-block d-xl-none"},{id:"visible-xl","class":"d-none d-xl-block"}],s=0;s<e.length;s++){var l=document.createElement("div");l.setAttribute("id",e[s].id),l.setAttribute("class",e[s]["class"]),document.getElementsByTagName("body")[0].appendChild(l)}}function isVisible(e){return"block"===window.getComputedStyle(document.getElementById("visible-"+e),null).getPropertyValue("display")}setResponsiveDivs();

Если вы используете Knockout , вы можете использовать следующую настраиваемую привязку, чтобы привязать текущую точку останова окна просмотра (xs, sm, md или lg) к наблюдаемому в вашей модели. Обвязка ...

• оборачивает 4 divsс visible-??классом в div с идентификаторомdetect-viewport и добавляет его в тело, если он еще не существует (чтобы вы могли повторно использовать эту привязку, не дублируя эти div)
• устанавливает текущую точку останова области просмотра на наблюдаемую границу, запрашивая, какой из divs является видимым
• обновляет текущую точку останова окна просмотра при изменении размера окна

ko.bindingHandlers['viewport'] = {
    init: function(element, valueAccessor) {
        if (!document.getElementById('detect-viewport')) {
            let detectViewportWrapper = document.createElement('div');
            detectViewportWrapper.id = 'detect-viewport';
            
            ["xs", "sm", "md", "lg"].forEach(function(breakpoint) {
                let breakpointDiv = document.createElement('div');
                breakpointDiv.className = 'visible-' + breakpoint;
                detectViewportWrapper.appendChild(breakpointDiv);
            });

            document.body.appendChild(detectViewportWrapper);
        }

        let setCurrentBreakpoint = function() {
            valueAccessor()($('#detect-viewport div:visible')[0].className.substring('visible-'.length));
        }
      
        $(window).resize(setCurrentBreakpoint);
        setCurrentBreakpoint();
    }
};

ko.applyBindings({
  currentViewPort: ko.observable()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div data-bind="viewport: currentViewPort"></div>
<div>    
    Current viewport breakpoint: <strong data-bind="text: currentViewPort"></strong>
</div>
<div>
    (Click the <em>full page</em> link of this snippet to test the binding with different window sizes)
</div>

Прошло некоторое время с момента OP, но вот мое решение с использованием Bootstrap 3. В моем случае использования я ориентировался только на строки, но то же самое можно было применить к контейнеру и т. Д.

Просто измените .row на все, что захотите.

jQuery(document).ready(function ($) {

    var alterClass = function () {

        var ww = document.body.clientWidth;

        if (ww < 768) {

            $('.row').addClass('is-xs').removeClass('is-sm').removeClass('is-lg').removeClass('is-md');

        } else if (ww >= 768 && ww < 992) {

            $('.row').addClass('is-sm').removeClass('is-xs').removeClass('is-lg').removeClass('is-md');

        } else if (ww >= 992 && ww < 1200) {

            $('.row').addClass('is-md').removeClass('is-xs').removeClass('is-lg').removeClass('is-sm');

        } else if (ww >= 1200) {

            $('.row').addClass('is-lg').removeClass('is-md').removeClass('is-sm').removeClass('is-xs');

        };
    };

    // Make Changes when the window is resized
    $(window).resize(function () {
        alterClass();
    });

    // Fire when the page first loads
    alterClass();
});