Pantallas Retina, imágenes de fondo de alta resolución

Esto puede parecer una pregunta tonta.

Si utilizo este fragmento de CSS para pantallas regulares (donde box-bg.pnges 200px por 200px);

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

y si uso una consulta de medios como esta para apuntar a pantallas de retina (con la imagen @ 2x siendo la versión de alta resolución);

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

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

¿Necesito duplicar el tamaño del .boxdiv a 400px por 400px para que coincida con la nueva imagen de fondo de alta resolución?

¿Necesito duplicar el tamaño del .box div a 400px por 400px para que coincida con la nueva imagen de fondo de alta resolución?

No, pero debe configurar la background-sizepropiedad para que coincida con las dimensiones originales:

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

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

EDITAR

Para agregar un poco más a esta respuesta, aquí está la consulta de detección de retina que suelo usar:

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

}

- Fuente

NÓTESE BIEN. Esto min--moz-device-pixel-ratio:no es un error tipográfico. Es un error bien documentado en ciertas versiones de Firefox y debería escribirse así para admitir versiones anteriores (anteriores a Firefox 16). - Fuente

Como @LiamNewmarch mencionó en los comentarios a continuación, puede incluir background-sizeen su backgrounddeclaración taquigráfica así:

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

Sin embargo, personalmente no recomendaría usar el formulario abreviado, ya que no es compatible con iOS <= 6 o Android, lo que lo hace poco confiable en la mayoría de las situaciones.

Aquí hay una solución que también incluye dispositivos High (er) DPI ( MDPI ) > ~ 160 puntos por pulgada como bastantes dispositivos que no son iOS (fe: 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;
       }

}

Como @ 3rror404 incluyó en su edición después de recibir comentarios de los comentarios, hay un mundo más allá de Webkit / iPhone. Una cosa que me molesta con la mayoría de las soluciones hasta ahora, como la que se menciona como fuente arriba en CSS-Tricks , es que esto no se tiene completamente en cuenta.
La fuente original ya fue más allá.

Como ejemplo, el Nexus 7 (2012) pantalla es una pantalla tvdpi con un extraño device-pixel-ratiode1.325 . Cuando se cargan las imágenes con resolución normal, se amplían mediante interpolación y, por lo tanto, se ven borrosas. Para mí, la aplicación de esta regla en la consulta de medios para incluir esos dispositivos logró obtener los mejores comentarios de los clientes.

Si planea usar la misma imagen para la pantalla retina y no retina, aquí está la solución. Digamos que tiene una imagen de 200x200y tiene dos íconos en la fila superior y dos íconos en la fila inferior. Entonces, son cuatro cuadrantes.

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

Al escalar y posicionar los íconos de sprites al 50% del valor real, puede obtener el resultado esperado.

Otra práctica solución de mezcla de SCSS 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 );
}

Para obtener más información sobre el mixin anterior, LEA AQUÍ .