it-swarm.com.ru

Twitter Bootstrap - как определить, когда начинается медиа-запрос

какой самый быстрый и простой способ запуска, когда медиа-запросы bootstrap-responseive.css вступают в действие?

перейти в действие = когда вы изменяете размер окна в соответствии с шириной мобильного телефона, а сайт меняется на отзывчивый мобильный

надеюсь, вопрос ясен

21
itsme

Используя jquery, вы можете найти размер текущего окна, а затем соответственно сделать свое дело.

$(window).resize(function() {
  if ($(this).width() >= 1280) {
    //do something
  }
  else if ($(this).width() < 1280 && $(this).width()>= 980) {
    //do something
  }
  ...
});

CSS:: Twitter-Bootsrap-макеты

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }
13
softvar

Я предложил подход, использующий событие изменения размера окна, но опирающийся на медиазапросы Twitter Bootstrap без жесткого кодирования их точек останова:

<span id="mq-detector">
    <span class="visible-xs"></span>
    <span class="visible-sm"></span>
    <span class="visible-md"></span>
    <span class="visible-lg"></span>
</span>

#mq-detector {
    visibility: hidden;
}

var currMqIdx = undefined;
var mqDetector = $("#mq-detector");
var mqSelectors = [
    mqDetector.find(".visible-xs"),
    mqDetector.find(".visible-sm"),
    mqDetector.find(".visible-md"),
    mqDetector.find(".visible-lg")
];

var checkForResize = function() {
    for (var i = 0; i <= mqSelectors.length; i++) {
        if (mqSelectors[i].is(":visible")) {
            if (currMqIdx != i) {
                currMqIdx = i;
                console.log(mqSelectors[i].attr("class"));
            }
            break;
        }
    }
};

$(window).on('resize', checkForResize);

checkForResize();
26
falsarella

Одна проблема с другими ответами - это событие изменения, которое запускается КАЖДОЕ изменение размера. Это может быть очень дорого, если ваш JavaScript делает что-то значительное.

Код ниже вызывает вашу функцию обновления только один раз, когда порог пересекается.

Чтобы проверить, возьмите ручку размера окна и быстро перетащите ее, чтобы увидеть, не запустится ли браузер.

<script>
// Global state variable
var winSize = '';

window.onresize = function () {
    var newWinSize = 'xs'; // default value, check for actual size
    if ($(this).width() >= 1200) {
        newWinSize = 'lg';
    } else if ($(this).width() >= 992) {
        newWinSize = 'md';
    } else if ($(this).width() >= 768) {
        newWinSize = 'sm';
    }

    if( newWinSize != winSize ) {
        doSomethingOnSizeChange();
        winSize = newWinSize;
    }
};
</script>
14
Stickley

Это работает для меня в сочетании с Bootstrap 3:

<div id="media-width-detection-element"></div>
<style type="text/css">
    #media-width-detection-element {
        display: none;
        width: 0px;
    }
    @media (min-width: 768px) {
        #media-width-detection-element {
            width: 768px;
        }
    }
    @media (min-width: 992px) {
        #media-width-detection-element {
            width: 992px;
        }
    }
    @media (min-width: 1200px) {
        #media-width-detection-element {
            width: 1200px;
        }
    }
</style>
<script type="text/javascript">
    //<![CDATA[
    function xs() {
        return $("#media-width-detection-element").css("width") === "0px";
    }
    function sm() {
        return $("#media-width-detection-element").css("width") === "768px";
    }
    function md() {
        return $("#media-width-detection-element").css("width") === "992px";
    }
    function lg() {
        return $("#media-width-detection-element").css("width") === "1200px";
    }
    //]]>
</script>

Скрытая ширина DIV изменяется в зависимости от используемых настроек минимальной ширины CSS. Тогда мой javascript просто проверяет ток с DIV.

10
Bjørn Stenfeldt

Отличный совет, @falsarella!

Для тех, кто любит подобные вещи, чтобы они не влияли на их фактическую разметку, работают следующие:

$(function(){
...
var mqClasses = ["visible-xs", "visible-sm", "visible-md", "visible-lg"];
var mq = $("<span id='mqDetector' style='visibility:hidden'></span>").appendTo($("body"));
$.each(mqClasses, function(idx, val) {
    mq.append("<span class='" + val + "'></span>");
});
function checkMQ() {
    var visible = mq.find(":visible").get(0).className;
    return visible.slice(-2);
};

function checkResize(){
    switch(checkMQ){
      case 'xs' : ...; break;
      case 'sm' : ...; break;
     ...
    }
}
$(window).on('resize', checkResize);
checkResize(); //do it once when page loads.
5
bknights

Исходя из решения @ falsarella , js-часть может быть упрощена до:

var currMqIdx = undefined;
var checkForResize = function() {    
    currMqIdx = $('#mq-detector span').index($('#mq-detector span:visible'));
};

$(window).on('resize', checkForResize);
checkForResize();

Значение currMqIdx будет int, от 0 до 3. Чем больше значение currMqIdx, тем шире медиа.

1
aGuegu

этот код добавить тег тела ld , md , sd или xd class 

     $(function(){

        var device_width_detect = '';

        function device_detec(){
            if ($(this).width() >= 1280) {
                device_width_detect = 'ld';
            }else if ($(this).width() < 1280 && $(this).width()>= 992) {
                device_width_detect = 'md';
            }else if ($(this).width() < 992 && $(this).width()>= 768) {
                device_width_detect = 'sd';
            }else if ($(this).width() < 768) {
                device_width_detect = 'xd';
            }
            $('body').removeClass( "ld md sd xd" ).addClass( device_width_detect );
        }
        device_detec();
        $(window).on('resize', device_detec);

    });
1
user243709

Я подготовил суперлегкую библиотеку для обработки событий, возникающих при изменении ширины окна и точки останова Bootstrap - responseive-breakpoint-tester

var viewport = new ResponsiveTester();

$('body').on('in.screen.xs', function(event, devices) {
    // Code executed when viewport is was changed to xs
});

$('body').on('out.screen.xs', function(event, devices) {
    // Code executed when viewport is no longer xs
});

Другие функции, такие как проверка текущей точки останова, также включены:

if (viewport.is('xs')) {
    // Executed only on xs breakpoint
}

if (viewport.is('!=xs')) {
    // Executed on all breakpoints that are not equal xs (sm, md, lg)
}

if (viewport.is('<md')) {
    // Executed on breakpoints that are smaller than md (xs, sm)
}

if (viewport.is('<=md')) {
    // Executed on breakpoints that are smaller or equal to md (xs, sm, md)
}

if (viewport.is('>md')) {
    // Executed on breakpoints that are larger than md (lg)
}

Поддерживаются конфигурации Bootstrap 4 и Foundation, более подробная информация о GitHub Repository

1
patrykgruszka

Simpler

$(window).on('resize', function () {
  if ($('<div class="visible-lg">').css('display')=='block') {
    // Do something for lg
  }
  // ...
});
0
cmc

вот мое решение для начальной загрузки 4, основанное на идее @falsarella

* примечание: используйте опцию «полная страница» ниже для проверки этого фрагмента, в противном случае он вернет неправильный тип экрана, в зависимости от размера фрагмента iframe

/**
 * @returns STRING current screen type like: xs, sm, md, lg or xl
 */
function getScreenType() {

  !function initHelpers() {
    if ($('div.mq-detector').length !== 0) return;
    $('body').append(_mqDetector());
    // helpers
    function _mqDetector() {
      return `
      <div class="mq-detector invisible">
        <div
          class="d-block d-sm-none"
          data-type="xs"></div>
        <div
          class="d-none d-sm-block d-md-none"
          data-type="sm"></div>
        <div
          class="d-none d-md-block d-lg-none"
          data-type="md"></div>
        <div
          class="d-none d-lg-block d-xl-none"
          data-type="lg"></div>
        <div
          class="d-none d-xl-block"
          data-type="xl"></div>
      </div>
      `;
    }
  }();

  // @then

  return $('div.mq-detector').children().filter(':visible').data('type');

}

console.log(getScreenType())
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

0
webolizzer

Я изменил коды в это ссылка на Bootstrap 4 не альфа или бета. Коды, как показано ниже;

    /* **********************************************************
        Detect bootrap 4 media query type
        https://getbootstrap.com/docs/4.0/utilities/display/
   ********************************************************** */


    $("body").append("<div style='visibilty:hidden' class='viewport-check'><span class='d-block d-sm-none'>xs</span><span class='d-none d-sm-block d-md-none'>sm</span><span class='d-none d-md-block d-lg-none'>md</span><span class='d-none d-lg-block d-xl-none'>lg</span><span class='d-none d-xl-block'>xl</span></div>");

    var Bootstrap4MediaQuery = "";

    //> Checks if the span is set to display block via CSS
    function FnDetectMediaQuery(_QsTarget) {
        var _QsTarget = $(_QsTarget).css('display') == 'block';
        return _QsTarget;
    }

    if(FnDetectMediaQuery('.viewport-check .d-block') == true)
    {
        Bootstrap4MediaQuery = "xs";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-sm-block') == true)
    {
        Bootstrap4MediaQuery = "sm";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-md-block') == true)
    {
        Bootstrap4MediaQuery = "md";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-lg-block') == true)
    {
        Bootstrap4MediaQuery = "lg";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-xl-block') == true)
    {
        Bootstrap4MediaQuery = "xl";
    }
    else
    {
        Bootstrap4MediaQuery = "";
    }

    console.log("Bootstrap4MediaQuery: " + Bootstrap4MediaQuery);
0
Kerberos

Вы можете использовать matchMedia и библиотеку обертки enquire.js, которая регистрирует медиазапросы и генерирует события, когда они совпадают/не совпадают.

Использование

Давайте использовать эти медиа-запросы Bootstrap CSS в качестве примера, взятого из документов .

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Чтобы увидеть, когда будет применено каждое из этих правил, используйте enquire.js для регистрации медиазапросов и предоставьте соответствующие функции match и unmatch, как показано ниже:

let rules = [
    '(max-width: 768px)',  // extra small devices, default
    '(min-width: 768px)',  // small devices
    '(min-width: 992px)',  // medium devices
    '(min-width: 1200px)'  // large devices
];

for (let rule of rules) {
    enquire.register(rule, {
      match: function() {
        console.log(rule + ' matched');
      },      

      unmatch: function() {
        console.log(rule + ' unmatched');
      } 
    });
}

enquire.js использует matchMedia, который поддерживает только современные браузеры , например, не IE9. Поэтому polyfill понадобится для старых браузеров, чтобы эта работа работала. 

Демо

0
Karolis Ramanauskas

Я использовал это, чтобы прикрепить навигационную панель только на https://ducttapedanyol.com в загрузочном устройстве на больших экранах:

if ($(this).width() >= 979) { // Detect screen size
$(document).ready(function () {

    var menu = $('.menu');
    var origOffsetY = menu.offset().top;

    function scroll() {
       if ($(window).scrollTop() >= origOffsetY) {
          $('.menu').addClass('sticky');
          $('.fix').addClass('fix-tall');
       } else {
          $('.menu').removeClass('sticky');
          $('.fix').removeClass('fix-tall');
       }


    }

    document.onscroll = scroll;

});
}
0
Topher