Обнаруживать динамические медиа-запросы с помощью JavaScript без жесткого кодирования ширины точек останова в скрипте? ⇐ CSS

[Гость]

Я искал легкое, гибкое, кроссбраузерное решение для доступа к медиа-запросам CSS в JavaScript, без повторения значений точек останова CSS в коде JavaScript.

CSS-tricks опубликовали решение на основе анимации CSS3, которое, похоже, сработало, однако вместо этого рекомендуется использовать Enquire.js.

Похоже, что Enquire.js по-прежнему требует, чтобы размеры медиа-запроса были жестко закодированы в скрипте, например

enquire.register("screen and (max-width:45em)", { // делаем что-нибудь } Проблема

На данный момент все решения для доступа к медиа-запросам в Javascript полагаются на точку останова, жестко запрограммированную в скрипте. Как можно получить доступ к точке останова таким образом, чтобы ее можно было определить только в CSS, не полагаясь на .on('resize')?

Попытка решения

Я создал свою собственную версию, которая работает в IE9+, используя скрытый элемент, который использует свойство :content для добавления всего, что я хочу, когда срабатывает запрос (та же отправная точка, что и решение ZeroSixThree):

HTML

Содержимое страницы

CSS

#mobile-test { дисплей: нет; содержимое: 'mq-small'; } Только экран @media и (минимальная ширина: 25em) { #mobile-test { содержимое: 'mq-medium'; } } Только экран @media и (минимальная ширина: 40em) { #mobile-test { содержимое: 'mq-large'; } } JavaScript с использованием jQuery

// Разрешить оценку изменения размера только после задержки, чтобы избежать постоянного срабатывания при изменении размера. вар изменить размер; window.onresize = функция() { ClearTimeout (изменить размер); // Вызов функции onResize после установленной задержки изменить размер = setTimeout (detectMediaQuery, 100); }; // Собираем значение свойства 'content' в виде строки, удаляя кавычки функция обнаруженияMediaQuery() { return $('#mobile-test').css('content').replace(/"/g, ''); } // Наконец, используйте функцию для обнаружения текущего медиа-запроса, независимо от значения его точки останова $(window).on('изменить размер загрузки', function() { if (detectMediaQuery() === 'mq-small') { // Делаем что-то для маленьких экранов и т. д. } }); Таким образом, точка останова медиа-запроса полностью обрабатывается с помощью CSS. Нет необходимости обновлять скрипт, если вы измените точки останова. Как это можно сделать?