Question

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

我有一个尺寸为300px x 83px的标识，对于视网膜，我有一个尺寸为600px x 166px的视网膜标识

我的代码（首先是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>

Answer 1

你有一个流氓分号：

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

应该是：

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

您可能必须再次为较大尺寸的视网膜图像指定background-size属性。

尝试添加“仅屏幕”，看看这是否有用：

@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);
        }

}

Answer 2

尝试“background-size：100％;” 我不确定所以我把它作为评论，但我认为你没有看到它。

视网膜设计与谷歌铬的CSS

2 个答案: