0

我正在设计一个带有视网膜图像的网站。它适用于 macbook pro 和 iphone 上的 safari。但是使用带有 Mountain Lion 的 macbook pro 上的 Chrome 版本 24.0，我只能看到 1/4 的视网膜图像。

我有一个大小为 300 像素 x 83 像素的徽标，对于视网膜，我有一个大小为 600 像素 x 166 像素的视网膜徽标

我的代码（首先使用 doctype html）：

<html>
<head>
<title></title>
<style>
.headerlogo {width:300px;height:83px;background: url(logo300.png);
background-size: 300px 83px;padding:0px;margin:0px}


@media  (-webkit-min-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(min--moz-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 1.5dppx) {

.headerlogo     {;background: url(logo600.png);}
}

</style>
</head>
<body>
<div class="headerlogo"></div>
</body>
</html>
4

2 回答 2

0

You have a rogue semicolon:

.headerlogo     {;background: url(logo600.png);}

Should be:

.headerlogo     {background: url(logo600.png);}

You may have to specify the background-size property again for the retina image too at the larger size.

Try adding "only screen" and see if that helps matters:

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
    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),
    only screen and (min-resolution: 1.5dppx) {

        .headerlogo {
            background: url(logo600.png);
        }

}
于 2013-02-11T14:53:02.713 回答
0

尝试“背景大小：100%；” 我不确定，所以我把它作为评论，但我认为你没有看到它。

于 2013-02-11T15:18:04.313 回答