CSS 视网膜和非视网膜媒体查询

Question

我正在尝试根据不同的分辨率为我的网站设置背景图片。我还想包括视网膜媒体查询，这样如果视网膜设备访问我的网站，就会加载正确的图像。问题是我总是得到最高分辨率，当然不是视网膜......这是我的 css

 <style>


#background
{
    font-size: large;
    position: relative;
    top:50%;
    left:50%;
    color: white;

}

  @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) 
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_1024@2x.png);
    background-color: rgb(0,0,0);
    }
}

@media screen and (min-width:1025px)
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_1024.png);
    background-color: rgb(0,0,0);
    }
}

@media screen and (max-width:1024px)
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_1024.png);
    background-color: rgb(0,0,0);
    }
}

@media screen and (max-width:720px)
{
    #demo{
    width: 100%;

    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_720.png);
    background-color: rgb(0,0,0);
    }
}

@media screen and (max-width:320px)
{
        #demo{
        width: 100%;

        height: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        position:absolute;
        background-image: url(demo_BG_320.png);
        background-color: rgb(0,0,0);
    } 
}
</style>

Answer 1

非视网膜用户必须使用-webkit-min-device-pixel-ratio:1。

非视网膜。

 @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 1) 
{
    #demo{
    width: 100%;
    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_1024@1x.png);
    background-color: rgb(0,0,0);
    }
}

视网膜

 @media only screen and (min-device-width : 768px) and (max-device-width:1024px) and (orientation : landscape)and (-webkit-min-device-pixel-ratio: 2) 
{
    #demo{
    width: 100%;
    min-height: 800px;
    background-size: 100%;
    background-repeat: no-repeat;
    position:absolute;
    background-image: url(demo_BG_1024@2x.png);
    background-color: rgb(0,0,0);
    }
}

Answer 2

要补充@BaTmaN 的答案，它很可能在 Firefox bc 中不起作用/示例代码使用 webkit 前缀。 对于其他浏览器，您需要使用正确的浏览器前缀： 例如。

only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5)

Answer 3

我不使用媒体查询，我使用的是 Retina.js。您需要做的就是包含retina.js 文件并托管两个版本的图像-image.png 和image@2x.png（例如）。

然后，JavaScript 将检查页面上的每个图像，如果可用，则在视网膜显示器上自动显示高分辨率图像（@2x - Apple 的预定义标识符），如果不可用，则显示正常图像。非视网膜显示器将提供非 @2x 版本。

更多信息在这里：http://imulus.github.io/retinajs/