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

Question

请参阅下面的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'});
}
});

Answer 1

这可以像我们在CSS中所做的那样简单地完成，比如：

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

来自媒体查询文档：

,(逗号(

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