使用CSS3堆叠媒体查询 [英] Stacking Media Queries with CSS3

问题描述

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

I'm trying to stack media queries in CSS, and can't seem to get it to work correctly. What i'm trying to achieve is having a single set of css rules for any of the media queries. I know normally I could use an and to have it apply to different rules, but in this case I'm trying to deal with vendor-specific prefixes so the browser won't satisfy all of the conditions.

这里是我到目前为止：

@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 */
}

这样堆叠规则的正确方法是什么？

What is the correct way to stack rules like this? Also, if there is any further reading on this subject, I'd like to check it out.

推荐答案

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

The correct way is to have only one @media at the very beginning, followed by a comma-separated list of media queries:

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

@media is only permitted when declaring a distinct media rule, and is not used to separate multiple media queries in a single rule.

这篇关于使用CSS3堆叠媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！