Подберите наиболее релевантный медиа запрос в Javascript

Question

Рассмотрим следующий массив:

const mediaQueries = [
    '(max-width: 730px)',
    '(max-width: 1600px)',
    '(min-width: 1600px)'
];

А теперь рассмотрим следующий цикл:

mediaQueries.forEach(query => {

    let mql = window.matchMedia(query);

    if (mql.matches) {
        console.log('match: ' + query);
    }

});

Приведенный выше код будет перебирать все медиазапросы и регистрировать их, если они соответствуют на основена текущем размере экрана.

Проблема

На экране шириной 700px будут совпадать как (max-width: 730px), так и (max-width: 1600px).

Iнужно как-то возвращать только наиболее подходящее совпадение на основе размера запроса и типа запроса.Используя экран 700px в качестве примера, это должно вернуть только (max-width: 730px).

Есть ли способ достичь этого с помощью window.matchMedia или это самый простой способ просто применить пользовательский порядок к массиву на основена значение запроса и тип запроса, а затем вернуть первое совпадение?

Answer 1

Если ваш массив содержит значения в правильном порядке, самое простое - использовать find ()

const matchingQuery = mediaQueries.find(query => 
    window.matchMedia(query).matches
);