Display Retina, immagini di sfondo ad alta risoluzione

Questa potrebbe suonare come una domanda stupida.

Se utilizzo questo frammento CSS per i display normali (dove box-bg.pngè 200px per 200px);

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

e se utilizzo una media query come questa per indirizzare i display retina (con l'immagine @ 2x che è la versione ad alta risoluzione);

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

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

Devo raddoppiare la dimensione del .boxdiv a 400px per 400px per abbinare la nuova immagine di sfondo ad alta risoluzione?

Devo raddoppiare le dimensioni del div .box a 400px per 400px per abbinare la nuova immagine di sfondo ad alta risoluzione

No, ma è necessario impostare la background-sizeproprietà in modo che corrisponda alle dimensioni originali:

@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;
    }
}

MODIFICARE

Per aggiungere un po 'di più a questa risposta, ecco la query di rilevamento della retina che tendo a usare:

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

}

- Fonte

NB. Questo min--moz-device-pixel-ratio:non è un errore di battitura. È un bug ben documentato in alcune versioni di Firefox e dovrebbe essere scritto in questo modo per supportare le versioni precedenti (precedenti a Firefox 16). - Fonte

Come @LiamNewmarch ha menzionato nei commenti qui sotto, puoi includere il background-sizenella tua backgrounddichiarazione abbreviata in questo modo:

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

Tuttavia, personalmente non consiglierei di utilizzare la forma abbreviata in quanto non è supportata in iOS <= 6 o Android rendendola inaffidabile nella maggior parte delle situazioni.

Ecco una soluzione che include anche dispositivi High (er) DPI ( MDPI ) > ~ 160 punti per pollice come alcuni dispositivi non iOS (ad es .: 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;
       }

}

Poiché @ 3rror404 ha incluso nella sua modifica dopo aver ricevuto feedback dai commenti, c'è un mondo oltre Webkit / iPhone. Una cosa che mi infastidisce con la maggior parte delle soluzioni finora come quella citata come fonte sopra in CSS-Tricks , è che questo non viene preso completamente in considerazione.
La fonte originale è andata già oltre.

Ad esempio, lo schermo del Nexus 7 (2012) è uno schermo TVDPI con uno strano device-pixel-ratiodi1.325 . Quando si caricano le immagini con risoluzione normale, vengono ridimensionate tramite interpolazione e quindi sfocate. Per me l'applicazione di questa regola nella media query per includere quei dispositivi è riuscita a ottenere il miglior feedback dei clienti.

Se stai pianificando di utilizzare la stessa immagine per lo schermo retina e non retina, ecco la soluzione. Supponi di avere un'immagine 200x200e di avere due icone nella riga superiore e due icone nella riga inferiore. Quindi, sono quattro quadranti.

.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 }

Ridimensionando e posizionando le icone degli sprite al 50% del valore effettivo, puoi ottenere il risultato atteso.

Un'altra pratica soluzione di mixin SCSS di 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 );
}

Per maggiori informazioni sul mixin sopra LEGGI QUI .