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

要添加@BaTmaN的答案，它很可能在Firefox中不起作用/示例代码使用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 2

您必须将-webkit-min-device-pixel-ratio:1用于非视网膜。

非Retina。

 @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 3

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

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

此处提供更多信息：http://imulus.github.io/retinajs/

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

3 个答案: