css - 嵌套在另一个@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

我不太确定，但我认为你在第二个媒体查询中漏掉了一个“and”

    @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;
        }
    } 
}