css - 高 dpi 媒体查询不重写原始 css

Question

我正在为我的网站设计样式，我希望它能够友好地显示在视网膜上，为此我计划对高 dpi 显示器使用媒体查询，但是我认为媒体查询不起作用，就像我查看浏览器时一样在我的视网膜 macbook 上生成代码，我可以看到 body 仍然有默认的 css，而不是媒体查询中的一个。这是为什么？我还需要添加什么吗？请注意，默认 css 和媒体查询都在同一个 css 文件中，但我认为这不是问题所在。

  /* ==========================================================================
   Theme Style
   ========================================================================== */

body {
    background-color: #ebebeb;
    /* background-image: url("../images/bg.png"); */
    background-image: url("http://bit.ly/Z1zQeb");
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    /* background-image: url("../images/bg_@2X.png"); */
    background-image: url("http://bit.ly/ZgBQ4c");
    background-size: 147px 147px;

}

---

编辑: 我也在控制台中收到此错误:INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

Answer 1

您还没有指定要应用样式的标签。试试这个。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        /* background-image: url("../images/bg_@2X.png"); */
        background-image: url("http://bit.ly/ZgBQ4c");
        background-size: 147px 147px;
    }
}