Javascript 具有媒体查询范围的JS match.Media

我在使用media.Match让我的站点响应matchMedia查询范围时遇到问题

基于注释的更新：我需要使用match.Media而不是CSS Media查询，因为我需要检查是否存在组件，如果为true，则需要在浏览器大小介于1400-1800px之间的情况下向另一个元素添加类。此外，每次调整浏览器的大小时，我都需要触发此命令

为了排除故障，我尝试了：

使用单个匹配介质（'（最小宽度：1400px）和（最大宽度：1800px）'）

进行单个匹配（仅使用最小宽度：1400px）即可成功。然而，当我添加第二个变量“mq.Max”和“and statement”时，整个过程都失败了

我已经通读了MDN，但仍然没有看到如何实现它

下面是JS，谢谢你的建议

if (jQuery('.jump-nav').length) {
// Create a condition that targets viewports at least 770px wide
window.onresize = function (event) {
    console.log(event);
    var mqMin = window.matchMedia('(min-width: 1400px)');
    var mqMax = window.matchMedia('(max-width: 1800px)');
    // check if media query matches@media (min-width: 30em) and (orientation: landscape)
    if (mqMin.matches && mqMax.matches) {
        console.log('Media Query Matched!')
        // add css class for desktop
        $('.rowComponent').addClass('jn-rowchange');
    } else {
        // remove css class if not desktop
        $('.rowComponent').removeClass('jn-rowchange');
    }
};

---

}

为什么不合并

mqMin

和

mqMax

matchMedia（'（最小宽度：1400px）和（最大宽度：1800px）

应该已经指定我尝试过了…现在更新它您也可以在每次调整窗口大小时重新创建查询。在外部创建它们，然后在内部检查匹配项。根据您这样做的原因，您可以使用CSS。因此，如果只是关于样式设置，您可以使用CSS媒体查询来查询该大小，并在查询中使用CSS，如

.rowComponent.jn rowchange{}

等。。