采用X2图像视网膜里显示CSS

我使用此查询，以确定视网膜显示：采用X2图像视网膜里显示CSS

for none retina displayes 
.logo { 
     background-position: -242px -138px; 
     width: 67px; 
     height: 14px; 
} 

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) { 
    .logo, arrow, ... { 
     background: url(../img/sprites_2x.png) no-repeat; 
    } 

     .logo { 
     background-position: -336px -20px; 
     width: 134px; 
     height: 28px; 
     } 
}

现在，这并不解决问题，因为图像没有2倍大小。如何写我的CSS，因此它使用正确的比例和图像的规模的视网膜显示。

来源

2014-10-01 puppeteer701

我正在使用两个不同的精灵。不仅如此，图像是2倍，但顺序是不同的。

使用在同一位置有图像的精灵表，然后这是CSS。

.left, .right, ... { 
     background-image: url(../img/sprites.png); 
     background-repeat: no-repeat; 
} 

@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) { 
.left, .right, ... { 
    background-image: url(../img/sprites_2x.png); 
    background-size: size of the sprite.png; 
} 

.left { 
    background-position: sprite.png position; 
    width: sprite.png width; 
    height: sprite.png height; 
}

来源

2014-10-06 11:08:41 puppeteer701

我猜想命名视网膜图像的标准是在文件名上加上@2x。

这个怎么样,,

/* for non retina display */  
.logo { 
    background: url(../img/sprites.png) no-repeat; 
    background-position: -242px -138px; 
    width: 67px; 
    height: 14px; 
} 

/* for retina display, using media query and @2x flag */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { 
    .logo { 
     background: url(../img/[email protected]) no-repeat; 
     background-position: -336px -20px; 
    } 
}

或者你可以使用retina js缓解

来源

2015-05-04 09:55:48

采用X2图像视网膜里显示CSS

回答

相关问题