时间戳

首页 > 解决方案 > 如何在jquery中组合两个不同的媒体查询

jquery - 如何在jquery中组合两个不同的媒体查询

问题描述

请参阅下面的 jquery 代码并帮助我最小化代码。所以我希望两个不同的媒体查询组合在一行中。

jQuery

$('.navbar-close').click(function(){
    $('.navbar').animate({'height':'0'});
    if (window.matchMedia('(max-width: 479px)').matches){
        $('body').css({'overflow':'auto'});
    }
    if (window.matchMedia('(max-width: 767px)').matches){
        $('body').css({'overflow':'auto'});
    }
});

标签： jquery

解决方案

这可以像我们在 CSS 中那样简单地完成，例如：

if (window.matchMedia('(max-width: 479px), (max-width: 767px)').matches){
    $('body').css({'overflow':'auto'});
}

来自媒体查询文档：

,（逗号）

逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句都返回真。换句话说，列表的行为类似于逻辑或运算符。

推荐阅读