匹配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来实现，或者是最简单的方法，就是根据查询的值和查询的类型对数组应用自定义顺序，然后返回第一个匹配项？ / p>

Answer 1

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

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