Retina affiche, images d’arrière-plan haute résolution

Cela peut sembler une question idiote.

Si j’utilise cet extrait CSS pour des affichages réguliers (Où box-bg.png est 200px par 200px);

 .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } 

et si j’utilise une requête média comme celle-ci pour cibler les affichages rétiniens (avec l’image @ 2x étant la version haute résolution);

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } 

Dois-je doubler la taille de la div .box par 400px pour correspondre à la nouvelle image de fond haute résolution?

Non, mais vous devez définir la propriété de background-size pour qu’elle corresponde aux dimensions d’origine:

 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{ background:url('images/box-bg@2x.png') no-repeat top left; background-size: 200px 200px; } } 

MODIFIER

Pour append un peu plus à cette réponse, voici la requête de détection de rétine que j’ai tendance à utiliser:

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

– La source

NB Ce rapport min--moz-device-pixel-ratio: n’est pas une faute de frappe. C’est un bogue bien documenté dans certaines versions de Firefox et devrait être écrit comme ceci pour supporter les anciennes versions (antérieures à Firefox 16). – La source


Comme @LiamNewmarch mentionné dans les commentaires ci-dessous, vous pouvez inclure la background-size dans votre déclaration d’ background abrégé comme suit:

 .box{ background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px; } 

Cependant, personnellement, je déconseille l’utilisation de la forme abrégée car elle n’est pas prise en charge dans iOS <= 6 ou Android, ce qui la rend peu fiable dans la plupart des situations.

Voici une solution qui inclut également des périphériques (er) DPI ( MDPI ) > ~ 160 points par pouce comme plusieurs périphériques non-iOS (par exemple, Google Nexus 7 2012 ):

 .box { background: url( 'img/box-bg.png' ) no-repeat top left; width: 200px; height: 200px; } @media only screen and ( -webkit-min-device-pixel-ratio: 1.3 ), only screen and ( min--moz-device-pixel-ratio: 1.3 ), only screen and ( -o-min-device-pixel-ratio: 2.6/2 ), /* returns 1.3, see Dev.Opera */ only screen and ( min-device-pixel-ratio: 1.3 ), only screen and ( min-resolution: 124.8dpi ), only screen and ( min-resolution: 1.3dppx ) { .box { background: url( 'img/box-bg@2x.png' ) no-repeat top left / 200px 200px; } } 

Comme @ 3rror404 est inclus dans son édition après avoir reçu les commentaires des commentaires, il y a un monde au-delà de Webkit / iPhone. Une chose qui m’embête avec la plupart des solutions, comme celle mentionnée ci – dessus comme source ci – dessus chez CSS-Tricks , est que cela n’est pas pleinement pris en compte.
La source originale est déjà allée plus loin.

Par exemple, l’écran Nexus 7 (2012) est un écran TVDPI avec un device-pixel-ratio étrange de 1.325 . Lors du chargement des images avec une résolution normale, elles sont redimensionnées par interpolation et donc floues. Pour moi, appliquer cette règle dans la requête multimédia afin d’inclure ces périphériques a permis d’obtenir les meilleurs commentaires des clients.

Si vous prévoyez d’utiliser la même image pour la rétine et les écrans non rétiniens, voici la solution. Dites que vous avez une image de 200x200 et que vous avez deux icons dans la rangée du haut et deux icons dans la rangée du bas. Donc, il y a quatre quadrants.

 .sprite-of-icons { background: url("../images/icons-in-four-quad-of-200by200.png") no-repeat; background-size: 100px 100px /* Scale it down to 50% rather using 200x200 */ } .sp-logo-1 { background-position: 0 0; } /* Reduce positioning of the icons down to 50% rather using -50px */ .sp-logo-2 { background-position: -25px 0; } .sp-logo-3 { background-position: 0 -25px; } .sp-logo-3 { background-position: -25px -25px; } 

La mise à l’échelle et le positionnement des icons de sprite à 50% de la valeur réelle, vous pouvez obtenir le résultat attendu.