Retina-Displays, hochauflösende Hintergrundbilder

Das klingt vielleicht nach einer dummen Frage.

Wenn ich dieses CSS-Snippet für normale Anzeigen verwende (wobei box-bg.png200 x 200 Pixel groß sind);

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

und wenn ich eine Medienabfrage wie diese verwende, um auf Retina-Displays abzuzielen (wobei das @ 2x-Bild die hochauflösende Version ist);

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

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

Muss ich die Größe des .boxDiv auf 400 x 400 Pixel verdoppeln, um dem neuen hochauflösenden Hintergrundbild zu entsprechen?

Muss ich die Größe der .box div auf 400 x 400 Pixel verdoppeln, um sie an das neue hochauflösende Hintergrundbild anzupassen?

Nein, aber Sie müssen die background-sizeEigenschaft so einstellen , dass sie mit den ursprünglichen Abmessungen übereinstimmt:

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

BEARBEITEN

Um dieser Antwort ein wenig mehr hinzuzufügen, hier die Abfrage zur Erkennung der Netzhaut, die ich normalerweise verwende:

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

}

- Quelle

NB. Dies min--moz-device-pixel-ratio:ist kein Tippfehler. Es ist ein gut dokumentierter Fehler in bestimmten Versionen von Firefox und sollte so geschrieben werden, um ältere Versionen (vor Firefox 16) zu unterstützen. - Quelle

Wie @LiamNewmarch in den Kommentaren unten erwähnt hat, können Sie Folgendes background-sizein Ihre Kurzschrift aufnehmen background:

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

Ich persönlich würde jedoch nicht empfehlen, das Kurzformular zu verwenden, da es in iOS <= 6 oder Android nicht unterstützt wird, was es in den meisten Situationen unzuverlässig macht.

Hier ist eine Lösung, die auch MDPI- Geräte (High (er) DPI ) > ~ 160 Punkte pro Zoll enthält, wie einige Nicht-iOS-Geräte (z. B. 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;
       }

}

Da @ 3rror404 in seiner Bearbeitung enthalten ist, nachdem er Feedback von den Kommentaren erhalten hat, gibt es eine Welt jenseits von Webkit / iPhone. Eine Sache, die mich bei den meisten Lösungen stört, wie die oben bei CSS-Tricks als Quelle angegebene , ist, dass dies nicht vollständig berücksichtigt wird.
Die ursprüngliche Quelle ging bereits weiter.

Als Beispiel ist der Nexus 7 (2012) Bildschirm ein TVDPI-Bildschirm mit einem seltsamen device-pixel-ratiovon1.325 . Wenn die Bilder mit normaler Auflösung geladen werden, werden sie durch Interpolation hochskaliert und sind daher unscharf. Für mich war es das beste Kundenfeedback, diese Regel in die Medienabfrage anzuwenden, um diese Geräte einzubeziehen.

Wenn Sie vorhaben, dasselbe Bild für Retina- und Nicht-Retina-Bildschirme zu verwenden, finden Sie hier die Lösung. Angenommen, Sie haben ein Bild von 200x200und zwei Symbole in der oberen Reihe und zwei Symbole in der unteren Reihe. Es sind also vier Quadranten.

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

Wenn Sie die Sprite-Symbole auf 50% über dem tatsächlichen Wert skalieren und positionieren, erhalten Sie das erwartete Ergebnis.

Eine weitere praktische SCSS-Mixin-Lösung von 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 );
}

Weitere Informationen zum obigen Mixin finden Sie HIER .