Retina ekranlar, yüksek çözünürlüklü arka plan resimleri

Bu aptalca bir soru gibi gelebilir.

Bu CSS parçacığını normal ekranlar için kullanırsam ( box-bg.png200 piksele 200 piksel nerede );

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

ve retina ekranları hedeflemek için bunun gibi bir ortam sorgusu kullanırsam (@ 2x görüntüsü yüksek çözünürlüklü sürümdür);

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

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

.boxYeni yüksek çözünürlüklü arka plan resmiyle eşleşmesi için div boyutunu ikiye katlamam gerekiyor mu?

Yeni yüksek çözünürlüklü arka plan resmiyle eşleştirmek için .box div boyutunu ikiye katlamam gerekiyor mu?

Hayır, ancak background-sizeözelliği orijinal boyutlarla eşleşecek şekilde ayarlamanız gerekir :

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

DÜZENLE

Bu yanıta biraz daha eklemek için, kullanmaya eğilimli olduğum retina algılama sorgusu:

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

}

- Kaynak

NB. Bu min--moz-device-pixel-ratio:bir yazım hatası değil. Firefox'un belirli sürümlerinde iyi belgelenmiş bir hatadır ve daha eski sürümleri (Firefox 16'dan önce) desteklemek için bu şekilde yazılmalıdır. - Kaynak

Aşağıdaki yorumlarda @LiamNewmarch'ın bahsettiği gibi background-size, kısayol backgroundbeyanınıza şu şekilde ekleyebilirsiniz :

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

Bununla birlikte, iOS <= 6 veya Android'de desteklenmediği için çoğu durumda güvenilmez hale getirdiği için kişisel olarak steno formunu kullanmanızı tavsiye etmem.

Aşağıda , iOS olmayan birkaç Cihaz gibi Yüksek (er) DPI ( MDPI ) cihazları > ~ 160 nokta / inç içeren bir çözüm bulunmaktadır (örn: 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;
       }

}

@ 3rror404 yorumlardan geri bildirim aldıktan sonra düzenlemesine dahil ettiği için Webkit / iPhone'un ötesinde bir dünya var. Yukarıda CSS-Tricks'de kaynak olarak atıfta bulunulana benzer birçok çözümle beni rahatsız eden bir şey , bunun tamamen hesaba katılmamasıdır. Orijinal kaynak ayrıca zaten gitti.

Bir örnek Nexus 7 gibi (2012) ekran olan garip ile tvdpi ekran device-pixel-ratioarasında1.325 . Görüntüleri normal çözünürlükte yüklerken, enterpolasyon yoluyla ölçeklenirler ve bu nedenle bulanıktırlar. Benim için bu kuralı medya sorgusunda en iyi müşteri geri bildiriminde başarılı olan cihazları dahil etmek için uyguluyorum.

Aynı görüntüyü retina ve retina olmayan ekran için kullanmayı planlıyorsanız, çözüm burada. Diyelim ki bir resminiz 200x200var ve üst satırda iki simge ve alt satırda iki simge var. Yani, dört kadran.

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

Hareketli grafik simgelerinin gerçek değerden% 50 oranında ölçeklendirilmesi ve konumlandırılması, beklenen sonucu elde edebilirsiniz.

Ryan Benhase'den başka bir kullanışlı SCSS mixin çözümü .

/****************************
 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 );
}

Yukarıdaki mixin hakkında daha fazla bilgi için BURAYA OKUYUN .