我可以在CSS媒体查询中使用“OR”吗？

Question

我正在尝试将以下三个媒体查询合并为一个：

@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) {
}

我在下面尝试了这个，但它不起作用：

@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) {
}

有没有办法将这些结合起来，可能还有“OR”？

Answer 1

来自specification

  

以下是使用CSS中的@ media-rule在逗号分隔列表中进行的几个媒体查询的示例：   @media screen and (color), projection and (color) { … }

仅在规则开头使用@media。