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

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

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

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

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

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

Ответ 1

Несмотря на то, что это старый вопрос, он высоко оценивает, когда ищет эту проблему.

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

Ответ 2

Paul Irish MatchMedia может сделать трюк: https://github.com/paulirish/matchMedia.js

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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