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

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

Jeśli używam tego fragmentu CSS do zwykłych wyświetlaczy (gdzie box-bg.png jest 200px na 200px); 

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

I jeśli używam takiego zapytania mediów, aby kierować wyświetlacze retina (z obrazem @2x jest wersja high-res); 

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

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

Czy muszę podwoić Rozmiar .box div do 400px przez 400px, aby dopasować nowy obraz tła o wysokiej rozdzielczości?

Author: Adrift, 2013-04-22
Source

3 answers

Nie, ale musisz ustawić właściwość background-size, aby pasowała do oryginalnych wymiarów: 

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

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

EDIT

Aby dodać trochę więcej do tej odpowiedzi, oto zapytanie wykrywające siatkówkę, którego zwykle 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) { 

}

- źródło

NB. To {[4] } nie jest literówka. Jest to dobrze udokumentowany błąd w niektórych wersjach Firefoksa i powinien być napisany w ten sposób, aby obsługiwać starsze wersje (przed Firefoksem 16). - źródło

Jako @LiamNewmarch wspomniany w komentarzach poniżej, możesz umieścić background-size w swojej deklaracji background tak: 

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

Jednak osobiście nie radzę używać formy skróconej, ponieważ nie jest obsługiwana w iOS

 167
Author: Turnip,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-15 12:05:19

Oto rozwiązanie, które obejmuje również urządzenia High (er) DPI (MDPI ) > ~160 punktów na cal Jak sporo urządzeń innych niż iOS (np.: 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;
       }

}

Jak dodał @3rror404 w swojej edycji po otrzymaniu opinii od komentarzy, jest świat poza Webkit/iPhone. Jedną z rzeczy, która denerwuje mnie z większością rozwiązań, takich jak ten, o którym mowa jako źródło powyżej w CSS-Tricks, jest to, że nie jest to w pełni wzięte pod uwagę konto.
oryginalne źródło poszło już dalej.

[[3]}jako przykład ekran Nexus 7 (2012) to ekran TVDPI z dziwnym device-pixel-ratio z 1.325. Podczas ładowania obrazów o normalnej rozdzielczości są one skalowane poprzez interpolację, a tym samym rozmyte. Dla mnie zastosowanie tej zasady w zapytaniu media do włączenia tych urządzeń udało się uzyskać najlepsze opinie klientów.
 12
Author: Volker E.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-18 19:18:24

Jeśli planujesz użyć tego samego obrazu na ekranie siatkówki i nie-siatkówki, oto rozwiązanie. Powiedzmy, że masz obraz 200x200 i masz dwie ikony w górnym wierszu i dwie ikony w dolnym wierszu. Cztery ćwiartki.

.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 sprite do 50% od rzeczywistej wartości, można uzyskać oczekiwany wynik.

 1
Author: Syed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-22 13:16:52