Блог

Главная - Вопросы по программированию - Соответствие JS.Носитель с диапазоном медиа-запросов

Соответствие JS.Носитель с диапазоном медиа-запросов

#javascript #media-queries

#javascript #медиа-запросы

Вопрос:

У меня возникла проблема с тем, чтобы мой сайт отвечал на диапазон запросов matchMedia с использованием media.Совпадение.

Обновления на основе комментариев: мне нужно использовать match.Медиа вместо медиа-запросов CSS, потому что мне нужно проверить, присутствует ли компонент, и если true, то мне нужно добавить класс к другому элементу, если размер браузера составляет от 1400 до 1800 пикселей. Кроме того, мне нужно, чтобы это срабатывало каждый раз при изменении размера браузера.

Для устранения неполадок я попытался:

  1. Использование одного matchMedia(‘(минимальная ширина: 1400 пикселей) и (максимальная ширина: 1800 пикселей)’)
  2. Выполняем одно совпадение (используя только минимальную ширину: 1400 пикселей), и это успешно. Однако, когда я добавляю в свою 2-ю переменную ‘mq.Max’ и ‘и оператор’, все это завершается неудачей.
  3. Я прочитал MDN и до сих пор не вижу, как это реализовать.

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

 if (jQuery('.jump-nav').length) {
// Create a condition that targets viewports at least 770px wide
window.onresize = function (event) {
    console.log(event);
    var mqMin = window.matchMedia('(min-width: 1400px)');
    var mqMax = window.matchMedia('(max-width: 1800px)');
    // check if media query matches@media (min-width: 30em) and (orientation: landscape)
    if (mqMin.matches amp;amp; mqMax.matches) {
        console.log('Media Query Matched!')
        // add css class for desktop
        $('.rowComponent').addClass('jn-rowchange');
    } else {
        // remove css class if not desktop
        $('.rowComponent').removeClass('jn-rowchange');
    }
};

}

Комментарии:

1. Почему бы не объединить mqMin и mqMax ? matchMedia('(min-width: 1400px) and (max-width: 1800px)')

2. Следовало указать, что я пробовал это … обновляя это сейчас

3. Вы также воссоздаете запросы каждый раз, когда изменяется размер окна. Создайте их снаружи, затем проверьте совпадения внутри.

4. В зависимости от того, почему вы это делаете, вы можете просто использовать CSS вместо этого. Итак, если речь идет просто о стилизации, у вас может быть свой медиа-запрос CSS для этого размера, а в запросе есть CSS, подобный .rowComponent.jn-rowchange{} etc..

Ответ №1:

Это то, что сработало для меня!

 let mqMin = window.matchMedia("(min-width: 768px)");
let mqMax = window.matchMedia("(max-width: 960px)");

window.onresize = function () {
  if (mqMin.matches amp;amp; mqMax.matches) {
    console.log("Inside Query parameter!");
  } else {
    console.log("Outside Query parameter!");
  }
};