使用CSS3堆叠媒体查询

Question

我正在尝试在CSS中堆叠媒体查询，似乎无法让它正常工作。我想要实现的是为任何媒体查询提供一套css规则。我通常知道我可以使用和将其应用于不同的规则，但在这种情况下，我正在尝试处理特定于供应商的前缀，因此浏览器无法满足所有条件。

这是我到目前为止所得到的：

@media only screen and (min--moz-device-pixel-ratio: 2),
@media only screen and (-o-min-device-pixel-ratio: 2/1),
@media only screen and (-webkit-min-device-pixel-ratio: 2),
@media only screen and (min-device-pixel-ratio: 2) {
    /* My rules go here */
}

这样堆叠规则的正确方法是什么？此外，如果有关于此主题的进一步阅读，我想查看。

Answer 1

正确的方法是在一开始只有一个@media，然后是以逗号分隔的媒体查询列表：

@media only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
    /* Your rules go here */
}

@media仅在声明 distinct 媒体规则时被允许，并且不用于在单个规则中分隔多个媒体查询。