视网膜@media查询的解析错误嵌套在另一个@media查询中

Question

我已经读过在其他@media查询中嵌套@media查询在CSS3中完全有效。

但是，我通过CSS验证器收到以下错误的解析错误：

@media screen and (max-width: 768px) {
    .some-class {
        float: none;
        width: 100%;
    }
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
        .retina-class {
            background: url(images/image@2x.png);
            background-size: 200px 200px;
        }
    } 
}

我在这里做错了什么想法？

Answer 1

我不完全确定，但我认为你错过了第二次媒体查询中的“和”

    @media screen and (max-width: 768px) {
    .some-class {
        float: none;
        width: 100%;
    }
    @media (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) { 
        .retina-class {
            background: url(images/image@2x.png);
            background-size: 200px 200px;
        }
    } 
}