How do I combine two media queries?

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

eg

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

These are the operators for media queries:

• , (comma, which works as an OR in a list of media queries)
• and
• not
• only

Examples:

@media screen and (color), print and not (color) {...}
@media (min-width: 640px) and (max-width: 767px) {...}
@media (max-width: 639px), (min-width: 768px) {...}

See: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Precedence

• , is interpreted as the delimiter in a list of single media queries which are ORed. So each media query between the commas is first evaluated, then they are ORed together. This gives the comma / OR the lowest precedence.
• not always applies to a whole media query, without extending over a comma. This gives NOT the second lowest precendence after the comma / OR.
• not and only are mutually exclusive and have the same precedence.
• and has the highest precedence
• () parentheses are only used around media features and their values, i.e. (color) or (min-width: 320px). They may NOT be used to change precedence by grouping expressions.