javascript - 匹配 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)将匹配。

我需要根据查询大小和查询类型以某种方式仅返回最相关的匹配项。以700px屏幕为例，这应该只返回(max-width: 730px).

有没有一种方法可以实现这一点，window.matchMedia或者是最简单的方法，即根据查询的值和查询的类型将自定义顺序应用于数组，然后返回第一个匹配项？

score 2 · Accepted Answer

如果您的数组以正确的顺序保存值，最简单的方法是使用 find()

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