使用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仅在声明不同的媒体规则时允许,并且不用于在单个规则中分隔多个媒体查询.