Layar Retina, gambar latar beresolusi tinggi

Ini mungkin terdengar seperti pertanyaan konyol.

Jika saya menggunakan potongan CSS ini untuk tampilan biasa (Dimana box-bg.png200px kali 200px);

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

dan jika saya menggunakan kueri media seperti ini untuk menargetkan tampilan retina (Dengan gambar @ 2x menjadi versi resolusi tinggi);

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

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

Apakah saya perlu menggandakan ukuran .boxdiv menjadi 400px kali 400px agar sesuai dengan gambar latar resolusi tinggi yang baru?

Apakah saya perlu menggandakan ukuran div .box menjadi 400px kali 400px agar sesuai dengan gambar latar resolusi tinggi yang baru

Tidak, tetapi Anda perlu menyetel background-sizeproperti agar sesuai dengan dimensi aslinya:

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

EDIT

Untuk menambahkan sedikit lebih banyak ke jawaban ini, berikut adalah kueri deteksi retina yang cenderung saya gunakan:

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

}

- Sumber

NB. Ini min--moz-device-pixel-ratio:bukan salah ketik. Ini adalah bug yang terdokumentasi dengan baik di versi Firefox tertentu dan harus ditulis seperti ini untuk mendukung versi yang lebih lama (sebelum Firefox 16). - Sumber

Seperti yang @LiamNewmarch sebutkan dalam komentar di bawah, Anda dapat memasukkan pernyataan background-sizesingkat Anda backgroundseperti ini:

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

Namun, saya pribadi tidak akan menyarankan penggunaan formulir singkat karena tidak didukung di iOS <= 6 atau Android sehingga tidak dapat diandalkan dalam banyak situasi.

Berikut adalah solusi yang juga mencakup perangkat DPI ( MDPI ) Tinggi > ~ 160 titik per inci seperti beberapa Perangkat non-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/box-bg@2x.png' ) no-repeat top left / 200px 200px;
       }

}

Karena @ 3rror404 disertakan dalam hasil editnya setelah menerima umpan balik dari komentar, ada dunia di luar Webkit / iPhone. Satu hal yang mengganggu saya dengan sebagian besar solusi sejauh ini seperti yang dirujuk sebagai sumber di atas di CSS-Tricks , adalah bahwa ini tidak sepenuhnya diperhitungkan.
Sumber aslinya sudah melangkah lebih jauh.

Sebagai contoh Nexus 7 (2012) layar adalah layar tvdpi dengan aneh device-pixel-ratiodari1.325 . Saat memuat gambar dengan resolusi normal, gambar tersebut ditingkatkan melalui interpolasi dan oleh karena itu menjadi buram. Bagi saya, menerapkan aturan ini dalam kueri media untuk memasukkan perangkat tersebut berhasil dalam umpan balik pelanggan terbaik.

Jika Anda berencana menggunakan gambar yang sama untuk layar retina dan non-retina, berikut solusinya. Katakanlah Anda memiliki gambar 200x200dan memiliki dua ikon di baris atas dan dua ikon di baris bawah. Jadi, ini empat kuadran.

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

Penskalaan dan pemosisian ikon sprite hingga 50% dari nilai sebenarnya, Anda bisa mendapatkan hasil yang diharapkan.

Solusi mixin SCSS berguna lainnya oleh 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 );
}

Untuk info lebih lanjut tentang mixin di atas BACA DI SINI .