2

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

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

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

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

4

1 回答 1

5

正确的方法是在一开始只有一个@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仅在声明不同的媒体规则时才允许，并且不用于在单个规则中分隔多个媒体查询。

于 2012-09-06T18:42:32.233 回答