CSSｽﾌﾟﾗｲﾄのﾛｰﾙｵｰﾊﾞｰをRetina対応するには？
ﾀｲﾄﾙ画像で､ｽﾏﾎ向け表示に苦戦しています｡
ｸﾘｯｸ時に効果が見れるよう､CSSｽﾌﾟﾗｲﾄを使っています｡
しかし､この方法を使用するとRetina対応が上手くいきません｡
どうすれば良いでしょうか？
ちなみに試したCSSはこちらです｡
.sprites {
background: url(/images/logo.png) no-repeat 0 top;
width: 104px;
height: 36px;
display: block;
margin-top: 10%;
text-indent: -9999px;
}
@media only screen and(-webkit-min-device-pixel-ratio: 1.5) {
.sprites {
background-image: url(/images/logo@2x.png) no-repeat 0 top;
background-size: 104px 72px;/* 画像自体の縦横半分のｻｲｽﾞ */
}
}
.sprites:hover {
background: url(/images/logo.png) no-repeat 0 bottom;
}
@media only screen and(-webkit-min-device-pixel-ratio: 1.5) {
.sprites:hover {
background-image: url(/images/logo@2x.png) no-repeat 0 bottom;
background-size: 104px 72px;/* 画像自体の縦横半分のｻｲｽﾞ */
}
}
