How to Combine Two Media Queries

How do I combine two media queries?

Not fully clear what you want to combine, but basically you separate them with a comma

@media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) { ...

Combine media queries

Use a comma to combine multiple media queries into a single rule.

Here is MDN's definition of the , (comma) in media queries:

Commas are used to combine multiple media queries into a single rule.
Each query in a comma-separated list is treated separately from the others.
Thus, if any of the queries in a list is true, the entire media statement
returns true.
In other words, lists behave like a logical or operator.

For example

@media screen and (max-width: 375px)
  , screen and (max-width: 414px)
{
   /* some css here */
}

Also, device-width/device-height are deprecated. Consider using width/height instead, as seen in the example above.

Is it possible to combine media queries for same CSS rules?

You don't have to add @media again in the second line. This should work:

@media screen and (min-width: 768px) and (max-width: 990px),
screen and (max-width: 630px) {
    .community-info-box {
        width: 100%;
        margin-right: 0;
        float: none;
        ... : ...
    }
}

How to use multiple media queries in a single CSS file.?

The meta tag should be added in the <head> tag in HTML document. Please check that have you added

<meta name="viewport" content="width=device-width, initial-scale=1">

The sequential order of css code also matters. Please change sequence by following:

@media only screen and (max-width: 600px){
      body{ background:green;}
}

@media only screen and (max-width: 500px){
    body{ background:red;}
}

How to combine two different media query in jquery

This can be done simply as we do in CSS like:

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

From Media queries docs:

, (comma)
Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

Combining CSS media queries

Separate them with a comma:

@media only print, only screen and (max-device-width: 480px)

See the spec, in particular, example VI (emphasis added):

Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND.

I doubt that the second only is needed, so you can probably do:

@media only print, screen and (max-device-width: 480px)