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

Question

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

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

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

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

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

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