Écrans Retina, images d'arrière-plan haute résolution

Cela peut sembler une question idiote.

Si j'utilise cet extrait CSS pour les affichages réguliers (Où box-bg.pngest 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 multimédia comme celle-ci pour cibler les écrans Retina (avec l'image @ 2x étant la version haute résolution);

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{background:url('images/[email protected]') no-repeat top left;}
}

Dois-je doubler la taille du .boxdiv à 400 px par 400 px pour correspondre à la nouvelle image d'arrière-plan haute résolution?

Dois-je doubler la taille du .box div à 400px par 400px pour correspondre à la nouvelle image d'arrière-plan haute résolution

Non, mais vous devez définir la background-sizepropriété pour qu'elle corresponde aux dimensions d'origine:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/[email protected]') no-repeat top left;
        background-size: 200px 200px;
    }
}

ÉDITER

Pour ajouter 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 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 afin de prendre en charge les anciennes versions (antérieures à Firefox 16). - La source

Comme @LiamNewmarch l'a mentionné dans les commentaires ci-dessous, vous pouvez inclure le background-sizedans votre backgrounddéclaration sténographique comme suit :

.box{
    background:url('images/[email protected]') no-repeat top left / 200px 200px;
}

Cependant, je ne conseillerais personnellement pas d'utiliser le formulaire abrégé car il n'est pas pris en charge dans iOS <= 6 ou Android, ce qui le rend peu fiable dans la plupart des situations.

Voici une solution qui inclut également les appareils High (er) DPI ( MDPI ) > ~ 160 points par pouce, comme de nombreux appareils 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/[email protected]' ) no-repeat top left / 200px 200px;
       }

}

Comme @ 3rror404 l'a inclus dans sa modification après avoir reçu les commentaires des commentaires, il existe un monde au-delà de Webkit / iPhone. Une chose qui me dérange avec la plupart des solutions à ce jour comme celle référencée comme source ci - dessus chez CSS-Tricks , c'est que cela n'est pas entièrement pris en compte.
La source originale allait déjà plus loin.

À titre d'exemple, l'écran du Nexus 7 (2012) est un écran TVDPI avec un bizarre device-pixel-ratiode1.325 . Lors du chargement des images avec une résolution normale, elles sont mises à l'échelle par interpolation et donc floues. Pour moi, l'application de cette règle dans la requête multimédia pour inclure ces appareils a permis d'obtenir les meilleurs commentaires des clients.

Si vous prévoyez d'utiliser la même image pour les écrans rétine et non rétine, voici la solution. Supposons que vous ayez une image de 200x200et que vous ayez deux icônes dans la rangée du haut et deux icônes dans la rangée du bas. Donc, c'est 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 icônes de sprite à 50% de la valeur réelle, vous pouvez obtenir le résultat attendu.

Une autre solution de mixin SCSS pratique de Ryan Benhase .

/****************************
 HIGH PPI DISPLAY BACKGROUNDS
*****************************/

@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {

  $at1x_path: "#{$path}.#{$ext}";
  $at2x_path: "#{$path}@2x.#{$ext}";

  background-image: url("#{$at1x_path}");
  background-size: $w $h;
  background-position: $pos;
  background-repeat: $repeat;

  @media all and (-webkit-min-device-pixel-ratio : 1.5),
  all and (-o-min-device-pixel-ratio: 3/2),
  all and (min--moz-device-pixel-ratio: 1.5),
  all and (min-device-pixel-ratio: 1.5) {
    background-image: url("#{$at2x_path}"); 
  }
}

div.background {
  @include background-2x( 'path/to/image', 'jpg', 100px, 100px, center center, repeat-x );
}

Pour plus d'informations sur le mixin ci-dessus, LISEZ ICI .