Доступ к CSS3 медиазапросам из Javascript

Question

Теперь, наконец, спустя 12 лет, когда весь мир переключается на медиа-запросы CSS3 и стремительный дизайн, остается проблема.

Как из Javascript узнать, какие медиа-запросы

• присутствует в коде HTML: это должен быть простой обход элементов, но есть ли более разумные способы?

• эффективен (запрос оценивается как true)

... так что вы можете добавить специальные пути кода для поддержки мобильных устройств, планшетов и т. Д. В коде Javascript?В конце концов можно написать функцию isMobile() и использовать ее в качестве флага для определенных действий, характерных для небольшого экрана.

Answer 1

На вашей странице может быть определенный объект, который получает известный стиль из вашего CSS для каждого интересующего медиа-запроса.Затем вы можете прочитать этот стиль с объекта с помощью getComputedStyle() и посмотреть, что ему было назначено, и это скажет вам, какой медиа-запрос имеет приоритет.