我正在设计一个带有视网膜图像的网站。它适用于 macbook pro 和 iphone 上的 safari。但是在装有 Mountain Lion 的 macbook pro 上使用 Chrome 24.0 版时，我只能看到 1/4 的视网膜图像。
我有一个大小为 300px x 83px 的 Logo ，对于 Retina，我有一个大小为 600px x 166px 的 Retina Logo
我的代码(首先是 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>
最佳答案
你有一个流氓分号:
.headerlogo {;background: url(logo600.png);}
应该是:
.headerlogo {background: url(logo600.png);}
对于较大尺寸的视网膜图像，您可能必须再次指定背景尺寸属性。
尝试添加“仅屏幕”，看看是否有帮助:
@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);
}
}
关于css - 用于 google chrome 的 css 视网膜设计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14814223/