Can I use “OR” in a CSS media query?

Question

I'm trying to combine the following three media queries into one:

@media only screen and (max-device-width: 480px) {
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}

@media only screen and (max-device-width: 1024px) {
}

I've tried this below, but it doesn't work:

@media only screen and (max-device-width: 480px),
@media only screen and (-webkit-min-device-pixel-ratio: 2),
@media only screen and (max-device-width: 1024px) {
}

Is there a way to combine these, possibly with an "OR"?

Answer 1

From the specification

Here is an example of several media queries in a comma-separated list using the an @media-rule in CSS: @media screen and (color), projection and (color) { … }

Only use @media at the start of the rule.