jquery - 在 CSS 中提供视网膜特定图像不起作用

Question

在此非常感谢您的帮助。我的网站上有一些社交图标，但在视网膜屏幕上它们看起来不太好。所以我使用媒体查询为视网膜设备提供这些图像的 2x 版本。不幸的是，它们不起作用，并且将图像放大并将其切掉一半。

请参阅此链接 Verdacci.com

图像在 Sprite 中，对于视网膜版本，我制作了一个新的 Sprite 并为 css 分配坐标以挑选图标。坐标看起来没问题，但它把它们放大到 50px，并且由于容器是 25px，它似乎被切断了。这是我用于普通版本和视网膜的 CSS。

ul.social-links a.facebook {
display: block;
background: url("images/s-icons.png") no-repeat scroll 0 -6px;
height: 25px;
width: 25px;
transition: background 300ms ease-in-out 0s;
}

ul.social-links a.facebook:hover {
display: block;
background: url("images/s-icons.png") no-repeat scroll 0 -40px;
height: 25px;
width: 25px;
}

对于视网膜媒体

/* CSS for high-resolution devices */
@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) {

/* Social Media Styles */


ul.social-links a.facebook {
display: block;
background: url("images/s-icons2x.png") no-repeat scroll 0 -12px;
height: 25px;
width: 25px;
transition: background 300ms ease-in-out 0s;
}

ul.social-links a.facebook:hover {
display: block;
background: url("images/s-icons2x.png") no-repeat scroll 0 -71px;
height: 25px;
width: 25px;
}

Answer 1

这里有几个问题:

您拥有@2x 的 Sprite 图像实际上不是两倍大小。它应该是 50px X 1138px。您还需要将视网膜 CSS 中的背景大小设置为非视网膜图像的大小。此外，无需设置非视网膜 CSS 中规定的高度、宽度、背景位置或任何其他 CSS。

示例:

    ul.social-links a.facebook {
        background: url("images/s-icons2x.png") no-repeat;
        -webkit-background-size: 25px 569px;        
        background-size: 25px 569px;
    }