CSS, определяющий активный медиа-запрос

В Javascript есть прямой способ (не включающий синтаксический анализ кода css), чтобы определить, какой медиа-запрос активен?

Например, у меня есть два запроса:

 @media screen and (max-width:800px)

 @media screen and (min-width:801px)

без синтаксического анализа и просмотра clientWidth, как я могу определить, какой из них оценивается как истинный.


javascript css media-queries
person freddylindstrom    schedule 28.03.2011    source источник
comment
Да, я могу это сделать, но это предполагает, что у меня есть элемент для вычисления. Я пытаюсь заполнить данные на основе медиа-запроса, у меня еще нет элементов, и кажется очень хакерским вставлять какой-то элемент с некоторыми фиктивными данными, чтобы сделать это определение.   -  person freddylindstrom    schedule 28.03.2011
comment
Вы можете настроить фон/границу одного из контейнеров/DIV так, чтобы он отображался ярко-красным, когда срабатывает одна из ширин (в качестве временной меры)?   -  person Dan    schedule 07.04.2011

Ответы (5)


arrow_upward
15
arrow_downward

Хотя это старый вопрос, он высоко оценивается при поиске этой проблемы в Google.

Window.matchMedia — это официальным и поддерживается всеми основными браузерами (IE10+) и позволяет запрашивать, если определенный медиазапрос настоящее время соответствует.

Из исходного вопроса:

if (window.matchMedia('screen and (max-width:800px)').matches) {
    // it matches
} else {
    // does not match
}

Вы также можете отслеживать изменения результата сопоставления запроса, подключив прослушиватель событий к MediaQueryList, который window.matchMedia возвращает:

var mql = window.matchMedia('screen and (max-width:800px)');
mql.addEventListener(
    function(mq) {
        if (mq.matches) {
            // it matches
        } else {
            // does not match
        }
    }
);
person Pete    schedule 21.03.2016
comment
Хотя это старый вопрос Всегда приветствуются хорошие сводки/обновления! Спасибо! - person Stijn de Witt; 22.01.2019

arrow_upward
0
arrow_downward

MatchMedia Пола Айриша может помочь: https://github.com/paulirish/matchMedia.js

Будет ли это соответствовать тому, что вы пытаетесь сделать?

person Daniel Nitsche    schedule 14.04.2011
comment
Это сработает..., однако я искал более элегантный подход :-( - person freddylindstrom; 15.04.2011

arrow_upward
0
arrow_downward

Чтобы увидеть, как различные медиа-запросы реагируют на изменение размера или ориентации, попробуйте демонстрацию на этой странице:

http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/

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

person jk.    schedule 20.04.2011

arrow_upward
0
arrow_downward

Привет, и я надеюсь, что это поможет, на самом деле я добавляю класс в селектор, и я работаю с этим инструментом: https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/< /а>

на самом деле, у них есть наглядный пример того, что включается в окне с измененным размером здесь http://robnyman.github.io/matchmedia/

в моем случае я просто выполняю конкретную задачу, когда нахожусь в определенном размере, который вы можете получить с помощью этой функции.

person GabouhSk8    schedule 10.01.2014

arrow_upward
0
arrow_downward

Я не уверен, как бы вы узнали, какой медиа-запрос активен, но...

... вы не можете просто проверить ширину экрана с помощью javascript?

if ( window.innerWidth >= 801 ) {
    // @media screen and (min-width:801px)
} else {
    // @media screen and (max-width:800px
}

или что мне здесь не хватает?

person dev_masta    schedule 09.02.2016
comment
о, только что увидел не разбирая и не глядя на clientWidth,, извините - person dev_masta; 09.02.2016