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