Wyświetlacze Retina, obrazy tła o wysokiej rozdzielczości

Question

To może brzmieć jak głupie pytanie.

Jeśli używam tego fragmentu CSS do regularnych wyświetlaczy (gdzie box-bg.png ma 200px o 200px);

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

i w przypadku korzystania z dalszych mediów, jak to docelowy zawiera siatkówki (z obrazem @ 2x jest wersją wysokiej rozdzielczości);

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

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

Czy muszę podwoić wielkość .box div 400px przez 400px, aby dopasować nowy wysokiej jakosci obrazu tła?

Answer 1

No, ale trzeba ustawić właściwość background-size dopasować oryginalne wymiary:

@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

Aby dodać trochę więcej do tej odpowiedzi, oto kwerendy wykrywania siatkówki używam:

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

} 

- Source

NB. Ten min--moz-device-pixel-ratio: nie jest literówką. Jest to dobrze udokumentowany błąd w niektórych wersjach Firefoksa i powinien być napisany w ten sposób w celu obsługi starszych wersji (przed Firefoksem 16). - Source

---

Jak @LiamNewmarch wspomniano w komentarzach poniżej, można zawierać background-size w swoim skrót background deklaracja tak:

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

Jednak ja osobiście nie radziłbym pomocą skróconej formy jako nie jest obsługiwany w systemie iOS < = 6 lub Android, co czyni go niewiarygodnym w większości sytuacji.

Answer 2

Oto rozwiązanie, które zawiera również wysoki (ER) DPI (MDPI) Urządzenia > ~ 160 punktów na cal jak sporo non-iOS Devices (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; 
     } 

} 

Jako że @ 3rror404 zawarty w jego edycji po otrzymaniu opinii od komentarzy, istnieje świat poza Webkit/iPhone. Jedną z rzeczy, która niszczy większość rozwiązań na tyle, na ile wspomniano powyżej, pod numerem CSS-Tricks, jest to, że nie jest to w pełni brane pod uwagę.
The original source poszło już dalej.

Jako przykład ekran Nexusa 7 (2012) to ekran TVDPI o rozdzielczości z dziwnym device-pixel-ratio of 1.325. Podczas ładowania obrazów z normalną rozdzielczością są one przeskalowane za pomocą interpolacji, a zatem są niewyraźne. Dla mnie zastosowanie tej zasady w zapytaniu o media w celu uwzględnienia tych urządzeń udało się uzyskać najlepsze opinie od klientów.

Answer 3

Jeśli planujesz użyć tego samego obrazu dla ekranu siatkówki i nie-siatkówki, oto rozwiązanie. Załóżmy, że masz obraz 200x200 i masz dwie ikony w górnym wierszu i dwie ikony w dolnym wierszu. A więc to cztery kwadranty.

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

Skalowanie i pozycjonowanie ikon ikonek na 50% niż rzeczywista wartość, można uzyskać oczekiwany wynik.